Сообщение от Иззет
|
сравнивал 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');
}