当前幻灯片+导航

Question

我有一个例子。标题中有一个菜单。滚动页面（块）时，下一个菜单项（li）中的文本应为红色。

JS Fiddle

例如，单击菜单上的功能：

$(".navigation li").click(function () {
        activeSection = $(this).index();
        $(".navigation li, .mobile-menu li").css({
            color: '#879996'
        });
        $(this).css({
            color: 'red'
        });
        scrollMeToSection();
}); 

Answer 1

检查，如果这是你想要的：JS Fiddle

我添加了一些css规则：

.header-bg .navigation li {
    color: #879996;
}
.header-bg .navigation li.current {
    color: #ff0000;
}

此外，我已将'current'课程添加到第一个li：

<li id="NavWho" class='current'>Rules</li>

更新scrollMeToSection功能：

function scrollMeToSection() {
    $('body').animate({
        scrollTop: ($(window).height() * activeSection)
    }, '1000', 'swing', function () {
        // can do something when finishes animating here.
        $('.navigation ul li').removeClass('current');
        $('.navigation ul li').eq(activeSection).addClass('current');
    });
}

Answer 2

如果您使用bootstrap，则有scrollspy plugin或this single scroll spy plugin

Answer 3

像http://imakewebthings.com/jquery-waypoints这样的jQuery插件可以帮助你解决这个问题。