页面滚动主动导航 javascript

Question

我有一个固定的顶部导航，我试图让链接在向下滚动页面时变为活动状态。目前我已经让它工作到一个点，如果你点击它会添加一个活动 class 并转到正确的位置。当您向上或向下滚动时，它应该更改为我无法正常工作的导航中的 previous/next 部分。有什么想法吗？

谢谢

html:

<body id="page-top">
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a href="#page-top"><img src="img/nav-logo.png" id="company-logo-large"></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right" id="mainmenu">
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#team">Team</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

导航滚动到的部分：

<section id="about"></section>
<section id="services"></section>
<section id="team"></section>

javascript:

$(document).ready(function () {
    $(document).on("scroll", onScroll);

    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');

        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#mainNav a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#mainNav li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

如有任何帮助，我们将不胜感激。

Answer 1

我想我已经回答了这个问题。检查

还有这个

http://jsfiddle.net/8n06pvy9/9/

页面滚动主动导航 javascript

Page scrolling active navigation javascript

html

javascript

navigation

scroll

twitter-bootstrap