Question

我在向登录页面添加jquery代码时遇到了麻烦，因此当我在各个部分中向下滚动时，相关部分应该通过添加名为clicked的类来显示在导航栏链接中。我已添加了我目前正在处理的代码片段供您参考.. :-) 任何帮助都将很高兴。： - ）

$(document).ready(function(){
    $(".link").click(function(event){
        ------ Scroll code ------------
        $(".clicked").removeClass("clicked");
        $(event.target).addClass("clicked"); 
    });
});

Answer 1

您无需为此添加onClick事件处理程序。你应该使用的方法并不困难。

首先，您需要知道当前的滚动位置，您可以使用以下方法检索：

$(document).scrollTop();

然后你需要知道可见部分底部的位置，这实际上是滚动位置+窗口的高度：

var btm = $(this).scrollTop() + $(window).height();

现在我们需要检查该部分是否在底部之上（这意味着它是可见的），所以为了做到这一点，我们需要获得该部分的位置。你可以使用：

来做到这一点

var titlePos = $($(myLink).attr("href")).offset().top;

这里发生的是我们要查找导航栏链接引用的部分，然后获取它的偏移量（这是它在文档中的位置）。您同时得到left和top偏移量，但在这种情况下，我们只需要获得top偏移量。

您唯一需要知道的是为导航中的所有链接自动执行此操作，您可以执行此操作，例如：

$(".nav li a").each(function() {
    var titlePos = $($(this).attr("href")).offset().top;
});

下一步是我们将查看标题的位置是否在屏幕底部之上，这意味着该部分是可见的。你可以使用：

来做到这一点

var btm = $(this).scrollTop() + $(window).height();
$(".nav li a").each(function() {
    var titlePos = $($(this).attr("href")).offset().top;
    if (titlePos < btm) {
         $(this).addClass("visited");
    }
});

现在只有一个问题。屏幕上方的部分（=您已经传递/读取的部分）也位于屏幕底部之上，这意味着使用此代码它们也将处于活动状态。

要解决这个问题，我们需要在知道下一部分可见时从上一个链接中删除.visited类。你可以使用：

来做到这一点

$(this).parents("li").prev().children("a").removeClass("visited");

这将转到活动链接之前的链接，并从中删除.visited类，因此实际上只有最后一个可见部分被标记为可见。

现在，您只需将所有这些添加到scroll事件处理程序并触发一次以初始化导航。代码将变成类似：

$(this).scroll(function() {
    var btm = $(this).scrollTop() + $(window).height();
    $(".nav li a").removeClass("visited").each(function() {
        var titlePos = $($(this).attr("href")).offset().top;
        if (titlePos < btm) {
             $(this).addClass("visited");
             $(this).parents("li").prev().children("a")
                 .removeClass("visited");
        }
    });
}).trigger("scroll");

另请注意小的变化，当我滚动时，我首先从所有导航链接中删除.visited类。我还做了一个JSFiddle来证明这一点。

滚动时如何选择链接？

1 个答案: