jQuery:根据浏览器滚动条位置将 css 类添加到菜单项 [英] jQuery : add css class to menu item based on browser scroller position

问题描述

我有一个菜单:

  <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 > 元素.

I want that depending of browser's scroller position, the "active" class goes the correct < li > element.

我是这么看的:

     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 属性不是很熟悉，所以这段代码没有多大意义，但我希望你能理解.

I am not very familiar with jQuery Dimensions properties so this code doesn't make much sense, but I hope you get the idea.

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

If someone could tell me how to make this work, it would be really cool.

谢谢:)

推荐答案

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

It's not entirely clear what it is you're trying to do, but I'll take a stab at it. To get the amount the window has scrolled vertically you'll want to use jQuery's scrollTop() function. The height() function gives you the height in pixels of the element upon which it is called, so it won't be very useful if the scroll value is what you want. Something like this might be closer to what you need:

// 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'); 之类的行可能没有按照您的预期运行.不是将活动"类添加到 li 然后从 li 的兄弟姐妹中删除它，它实际上是将该类添加到父 ul 并将其从 ul 的兄弟姐妹中删除.尝试从每一行中删除 .parent() ，这应该可以工作.

Even if the above isn't on the right track, there are a couple other things to note that might help. The lines such as $('#m1').parent().addClass('active').siblings().removeClass('active'); are likely not doing what you expect. Rather than adding the 'active' class to the li and then removing it from the li's siblings, it's actually adding the class to the parent ul and removing it from the ul's siblings. Try removing .parent() from each line and that should work.

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

Also, since you are using == in your if conditions, the class will be added only when the value is exactly 500 or 1000 etc. which I doubt is what you intend. That's why in the code above I changed it to be <= for the conditional statements.

希望这会有所帮助.

这篇关于jQuery:根据浏览器滚动条位置将 css 类添加到菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！