Jquery scroll, изменить активный класс навигации, поскольку страница прокручивается относительно разделов

http://jsfiddle.net/motocomdigital/gUWdJ/

Я использую технику прокрутки jquery, поэтому я хотел бы адаптироваться к моему проекту.

Пожалуйста, посмотрите мой пример проекта как скрипку здесь http://jsfiddle.net/motocomdigital/gUWdJ/

В настоящее время вы можете видеть, что мои навигационные ссылки автоматически оживляют прокрутку относительно <section>.

Мой вопрос заключается в использовании метода $(window).scroll, как добавить класс .active в мой nav a, когда разделы достигают вершины окна?

Так, например, если пользователь прокручивает страницу (вместо ссылок на навигацию), я хочу, чтобы активный класс был добавлен относительной ссылкой навигации. Указывая, где вы находитесь на странице.

Активный класс должен быть удален, а затем добавлен каждый раз, когда я предполагаю, когда пользователь прокручивает страницу вниз.

Также вам придется учитывать высоту 28px фиксированной панели навигации, верхнее окно смещения.

Может кто-нибудь, пожалуйста, покажет мне технику, которую я могу попробовать и использовать или адаптировать, или, возможно, показать мне, используя мой jsfiddle:)

Любая помощь будет высоко оценена, спасибо заранее!

http://jsfiddle.net/motocomdigital/gUWdJ/

Ответ 1

Если вам нужна более общая функция:

СМОТРЕТЬ ДЕМО

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        $('nav').addClass('fixed');
        $('.wrapper section').each(function(i) {
            if ($(this).position().top <= windscroll - 100) {
                $('nav a.active').removeClass('active');
                $('nav a').eq(i).addClass('active');
            }
        });

    } else {

        $('nav').removeClass('fixed');
        $('nav a.active').removeClass('active');
        $('nav a:first').addClass('active');
    }

}).scroll();

Ответ 2

Вы можете сделать так: http://jsfiddle.net/gUWdJ/1/

$(window).scroll(function() {

    if ($(this).scrollTop() < $('section[data-anchor="top"]').offset().top) {
       $('nav a').removeClass('active');
    }

    if ($(this).scrollTop() >= $('section[data-anchor="top"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(0)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="news"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(1)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="products"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(2)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="contact"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(3)').addClass('active');
    }

});

Ответ 3

Я пошел дальше и модифицировал мой script от A. Wolf, потому что мне нужно было убедиться, что мои пункты меню освещаются с отрицательной верхней разницей вместо 0. Это работает намного лучше, чем создание отдельной функции и избегает необходимости создавать событие клика для каждого элемента меню. Я также хотел бы изменить этот script для учета последнего элемента в меню, он должен быть автоматически подсвечен, если второй - последний элемент. Я полагаю, что мой очень похож, но отличается тем, что я обрабатывал каждый цикл за пределами моей основной функции выделения. Другая замечательная вещь о моей модификации - это учет наличия изображений внутри ссылки внутри элемента меню и учета высоты элемента, а когда нижняя часть этого элемента попадает в верхнюю часть страницы, то есть когда подсветка должна перед тем, как новый сделает.

function highlight(item)
{
var itemTop = jQuery(item).position().top;

var windowTop = jQuery(window).scrollTop(); 
var topDifference = (windowTop - itemTop); 

var itemHeight = jQuery(item).height();
var bottomDifference = topDifference - itemHeight; 

var menuId = jQuery('#nav-icons li a').attr('href');
if (menuId = item)
{
    if(topDifference > -1 && bottomDifference < 0)
    {
        jQuery("#nav-icons li a[href='" + item + "']").parent().addClass('active');
        jQuery("#nav-icons li a[href!='" + item + "']").parent().removeClass('active');
    }
    else {
        jQuery("#nav-icons li a[href='" + item + "']").parent().removeClass('active');
    }
}
}
jQuery('#nav-icons li a').each(function(){
var eachAttr = jQuery(this).attr('href');
highlight(eachAttr);
});