javascript - 在窗口滚动时更改导航活动类

Question

我想在这里创建一个滚动效果 http://www.strikingly.com/s/pages/default-ion?demo=ion#1 我现在需要的是在窗口滚动时更改导航 li 类活动，只需使用<a href='#about'>哈希目标更改它

http://jsfiddle.net/Dxtyu/131/

Answer 1

演示

Serlite的代码非常好，但有一些错误。

1. 如果向下滚动到最后，最后两个a元素都有active类，因此两者都会突出显示。

解决方案

添加$('#menu-center ul li a').removeClass("active");以在以下代码中添加新类之前删除所有以前的活动类。

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active"); //added to remove active class from all a elements
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

2. 如果您单击第二个或更大的菜单链接，它会使您滚动到该位置，但将活动类更改为上一个链接。

解决方案

$('html, body').stop().animate({
            'scrollTop': $target.offset().top+2

Answer 2

好吧...不确定您是否仍在寻找问题的答案，但我可以提出建议...

如前所述，您可以使用该scrollTop()方法来确定当前在视口中的部分。这是我拼凑起来确定的一个快速函数，它可能没有经过优化（我不是 jQuery 专家，抱歉），但它似乎工作，并且至少应该让你走上解决方案的正确道路：

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

该函数基本上采用href每个菜单锚元素的 ，并使用它<div>在文档中查找具有匹配 id 的（或任何其他元素，如果您愿意）。之后，它会检查它的顶部<div>是在当前滚动位置之上还是在当前滚动位置，并且它的底部仍然在当前滚动位置之下。（这两个条件为真意味着这<div>是视口中当前最高的一个，因此应被视为活动部分。）.active然后相应地删除/添加该类。当然，如果您想在某个部分被视为“活动”时进行偏移，您可以只添加/减去值。

也许仅仅展示它的作用更容易，所以这里有一个更新的 JSFiddle实现了这个功能。它最初是使用绑定的$(document).on("scroll")- 但是，请注意，$(document).off("scroll")在平滑滚动发生时，我还使用滚动事件将其从滚动事件中解绑，以便该部分在您到达目标部分之前不会更改（如果您单击其中一个菜单链接）。平滑滚动发生后，我再次将该函数绑定到滚动事件。

无论如何，我希望这就是你要找的！如果不是，请告诉我，我很乐意提供进一步帮助。（或者我会尝试，至少——因为正如我所提到的，jQuery 并不是我真正的专长......）祝你好运！

Answer 3

在您的事件侦听器上使用$(this).scrollTop();以检查视口中的部分。

Answer 4

在 IE9 中打嗝，所以我更正了

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

    //smoothscroll
    $('a[href^="#"]').click(function(){
    var target = $(this).attr('href');
    $('html, body').animate({scrollTop: $(target).offset().top-48}, 500);
    return false;

        $("#menu a").click(function () {
            $("#menu a").removeClass('active');
        })
        $(this).addClass('active');

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

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

Answer 5

我知道我迟到了，但我的回答可能会对这个帖子的新观众有所帮助。Tushar Gupta 的回答是正确的。但是，如果菜单中有一个链接重定向到任何其他页面。Tushar Gupta's Answer 将引发错误。例如

    <div class="m1 menu">
    <div id="menu-center">
        <ul>
            <li><a  href="#home">Home</a>
            </li>
            <li><a  href="#portfolio">Portfolio</a>
            </li>
            <li><a  href="#about">About</a>
            </li>
            <li><a  href="http://mywebsite.com/blog">Blog</a>
            </li>
            <li><a  href="#contact">Contact</a>
            </li>
        </ul>
    </div>
   </div>
   <div id="home"></div>
   <div id="portfolio"></div>
   <div id="about"></div>
   <div id="contact"></div>

这将在控制台中引发这样的错误。滚动对联系人不起作用。我更新了 Tushar 的代码来解决这个问题。

function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a[href*=#]:not([href=#])').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('#menu-center ul li a').removeClass("active"); //added to remove active class from all a elements
        currLink.addClass("active");
    }
    else{
        currLink.removeClass("active");
    }
});
}