jQuery：根据浏览器滚动条位置将 css 类添加到菜单项

Question

我有一个菜单：

  <ul class="menu-bottom">
  <li id="m1" class="active"><a id="1" href="#"><span>Link 1</span></a></li>
   <li id="m2"><a id="2" href="#"><span>Link 2</span></a></li>
   <li id="m3"><a id="3" href="#"><span>Link 3</span></a></li>
</ul>

我希望根据浏览器的滚动条位置，"active" 类会正确 li > 元素。

我是这样看的：

     if ($(document).height() == 500) {
$('#m1').parent().addClass('active').
siblings().removeClass('active');
}

     if ($(document).height() == 1000) {
$('#m2').parent().addClass('active').
siblings().removeClass('active');
}

     if ($(document).height() == 1500) {
$('#m2').parent().addClass('active').
siblings().removeClass('active');
} 

我对 jQuery Dimensions 属性不是很熟悉，所以这段代码没有多大意义，但我希望你能明白。

如果有人能告诉我如何完成这项工作，那就太酷了。

谢谢 ：）

Answer 1

目前还不完全清楚你想做什么，但我会尝试一下。要获取窗口垂直滚动的量，您需要使用 jQuery 的 scrollTop() 函数。 height() 函数为您提供调用它的元素的高度（以像素为单位），因此如果滚动值是您想要的值，那么它不会很有用。像这样的东西可能更接近您所需要的：

// bind a function to the window's scroll event, this will update
// the 'active' class every time the user scrolls the window
$(window).scroll(function() {    
    // find the li with class 'active' and remove it
    $("ul.menu-bottom li.active").removeClass("active");
    // get the amount the window has scrolled
    var scroll = $(window).scrollTop();
    // add the 'active' class to the correct li based on the scroll amount
    if (scroll <= 500) {
        $("#m1").addClass("active");
    }
    else if (scroll <= 1000) {
        $("#m2").addClass("active");
    }
    else {
        $("#m3").addClass("active");
    }
}

即使上面的内容没有走上正确的轨道，还有其他一些需要注意的事情可能会有所帮助。 $('#m1').parent().addClass('active').siblings().removeClass('active'); 等行可能不会执行您期望的操作。它实际上是将类添加到父 ul 中，然后从 ul 的同级中删除，而不是将“active”类添加到 li 中，然后将其从 li 的同级中删除。尝试从每一行中删除 .parent() ，这应该可行。

另外，由于您在 if 条件中使用 == ，因此仅当值恰好为 500 或 1000 等时才会添加该类，我怀疑这是否是您的意图。这就是为什么在上面的代码中我将条件语句更改为 <= 。

希望这有帮助。