Question

我正在努力创建一个单页网站。目前我已经点击导航菜单滚动到网站的选定部分，活动标签也会在点击时更改。但我想弄清楚的是，当下一页滚动到（并且没有在菜单中点击）时，如何将css更改为活动选项卡。

$(document).ready(function(){
    $("nav ul li").click(function(){
        var sectionClass = $(this).attr('class');   
            if ($(this).hasClass('active')){
            }
            else {
                $("nav ul li.active").removeClass('active');    
                $(this).addClass('active');                                 
                sectionId = $(this).attr('id');
                var parts = sectionId.split("_");
                $('html, body').animate({                                       
                    scrollTop: $("#" + parts[1]).offset().top
                }, 'slow');
            }
        });
    });

<body>
    <nav class="nav-bar">
        <ul>
            <li class="active" id="menu_index">Welcome</li>
            <li id="menu_page1">Menu1</li>
            <li id="menu_page2">Menu2</li>
            <li id="menu_page3">Menu3</li>
            <li id="menu_page4">Menu4</li>
        </ul>
    </nav>
    <div id="index"></div>
    <div id="page1"></div>
    <div id="page2"></div>
    <div id="page3"></div>
    <div id="page4"></div>
</body>

https://jsfiddle.net/nsefqo3w/

添加jsfiddle以显示它是如何现在，我是新的，所以你可能会发现一些问题！

Answer 1

将菜单更改为如下设置：

<ul>
     <li><a href="#page1">Page 1</a>
     ...
</ul>

这样，当点击锚点时，它会滚动到id page1的DOM元素。

然后，您可以使用以下代码在滚动标记为活动：

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

修改

使用您自己的jQuery代码，以便它也会在onclick上变为活动状态。

来源：http://jsfiddle.net/cse_tushar/Dxtyu/141/

根据滚动位置

1 个答案: