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>

我想这取决于浏览器的滚轮位置，在活跃的类将正确的＆LT; 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的尺寸属性，所以这code没有多大意义，但我希望你的想法。

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的（）函数的数量。在高度（）功能，使您能够在其所称为元素的像素高度，因此，如果滚动值是你想要的它不会是非常有用的。这样的事情可能会更接近你所需要的：

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'）父（）addClass（激活）的兄弟姐妹（）removeClass移除（激活）; 有可能不做你所期望的。而不是增加活跃类锂，然后从李的兄弟姐妹删除它，它实际上添加类父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.

此外，由于你在你的情况，如果使用==，只有当值恰好是500或1000等等。我怀疑是你打算什么类将被添加。这就是为什么在code以上我改变了它是＆LT; =为条件语句

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