Question

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

由于

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://stackoverflow.com/questions/28394485/highlight-active-menu-item-on-scroll

和这个

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

页面滚动活动导航javascript

1 个答案: