Question

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

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

Answer 1

DEMO

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

如果向下滚动到最后两个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");
        }
    });
}

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

<强>解决方案

$('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，并使用它来查找文档中具有匹配id的<div>（或任何其他元素，如果您愿意）。在此之后，它会检查<div>的顶部是在上方还是在当前滚动位置，并且其底部仍然低于当前滚动位置。（这两个条件为真意味着此<div>是视口中当前最高的那个，因此应被视为活动部分。）然后相应地删除/添加类.active。当然，如果要在某个部分被视为“活动”时要进行偏移，则可以添加/减去值。

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

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

Answer 3

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

    <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>

这将在this之类的控制台中抛出错误。滚动不适用于联系人。我更新了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");
    }
});
}

Answer 4

在事件监听器上使用$(this).scrollTop();来检查视口中的哪个部分。

Answer 5

在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");
        }
    });
}

在窗口滚动上更改导航活动类

5 个答案: