Показать сообщение отдельно
  #4 (permalink)  
Старый 23.11.2013, 01:53
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

Сообщение от Иззет
сравнивал id блока, в кот-ом мы сейчас находимся с адресом якорной ссылки
Чтоб понять где мы находимся, сначала нужно сравнивать $(document).scrollTop() и $(elements).offset().top
А тогда уже искать в меню соответствующий пункт.

Посмотреть
<div id="nav">
	<a href="one" class="actual">one</a>
	<a href="two">two</a>
	<a href="three">three</a>
</div>

<div class="scroll selected" id="one">one</div>
<div class="scroll" id="two">two</div>
<div class="scroll" id="three">three</div>

$('#nav a').click(function() {
	var id = $(this).attr('href'); // идентификатор блока с нужным якорем
	var y = $('#'+id).offset().top; // координаты начала блока
	$('body').animate({scrollTop:y}, 'slow'); // катимся к якорю + инициируем скроллинг
	return false; // отмена стандартного действия (перехода по ссылке)
});

var lastID; // для id последнего посещённого блока, которому сменили класс
var elemID; // для id текущего блока, которому будем добавлять класс

$(window).scroll(function() {
	var yDoc = $(document).scrollTop(); // координаты текущего скроллинга по вертикали
	$('.scroll').each(function() { // прогуляемся по блокам (надеюсь их немного)
		var yElem = $(this).offset().top; // координаты позиции каждого блока по вертикали
		if (yDoc >= yElem && yDoc < (yElem+50)) { // если верх блока достиг верха страницы + запас 50px
			elemID = $(this).attr('id'); // id блока которому будем добавлять класс
			if (elemID != lastID) { // меняем класс только один раз для текущего блока (а не каждый пиксель скроллинга)
				lastID = elemID; // запоминаем, что здесь класс мы уже добавили
				mark($('#nav a[href='+elemID+']'), $(this)); // смена классов для блока и пункта меню
			}
		}
	});
});

function mark(nav, elem) { // функция смены классов
	$('#nav a').removeClass('actual');
	nav.addClass('actual');
	$('.scroll').removeClass('selected');
	elem.addClass('selected');
}

Последний раз редактировалось mi.rafaylik, 23.11.2013 в 13:03.
Ответить с цитированием