当有人滚动传递元素时，如何更改元素的属性（粘滞元素）

Question

例如http://twitter.github.com/bootstrap/base-css.html尝试向上滚动。 你会看到酒吧

“排版代码表形式按钮图标由Glyphicons”

当你滚动传递元素时，它将添加一个类来使元素发生变化。 当您向上滚动时，它将删除该属性以再次更改元素。

编辑：我发现这是Sticky Element。

Answer 1

他们正在使用addClass（）函数

$(".subnav").addClass("subnav-fixed");

这是他们正在使用的功能

function processScroll() {
    var i, scrollTop = $win.scrollTop() //get the scroll position of the window object
    if (scrollTop >= navTop && !isFixed) { //check if its position is higher that the position of the navigation
    isFixed = 1 //if yes fix it
    $nav.addClass('subnav-fixed')
} else if (scrollTop <= navTop && isFixed) { //if is not higher then
    isFixed = 0
    $nav.removeClass('subnav-fixed') //un fix it
}
}

并且他们在文档的滚动事件上调用此函数。 可能是这样的

$(document).scroll(function() {
    processScroll();
}); 

Answer 2

那个jquery插件可以做你想要的： http ：//imakewebthings.com/jquery-waypoints/

以下是从URL中获取的示例：

someElements.waypoint(function(event, direction) {
   if (direction === 'down') {
      // do this on the way down
   }
   else {
      // do this on the way back up through the waypoint
   }
});

干杯

Answer 3

他们正在跟踪滚动位置并修改li元素上的类

您看到的子导航栏是使用ul和li元素实现的。 你可以从firebug看到：

<div class="subnav subnav-fixed">
    <ul class="nav nav-pills">
      <li class=""><a href="#typography">Typography</a></li>
      <li class=""><a href="#code">Code</a></li>
      <li class="active"><a href="#tables">Tables</a></li>
      <li class=""><a href="#forms">Forms</a></li>
      <li class=""><a href="#buttons">Buttons</a></li>
      <li class=""><a href="#icons">Icons by Glyphicons</a></li>
    </ul>
  </div>

注意他们如何为他们想要激活的导航元素设置class ='active'。

使用Jquery，您需要选择li元素并更改它。 有很多方法可以选择你想要的元素（通过id，子选择器，类选择器等）。参见http://api.jquery.com/category/selectors/

要更改类，可以使用toggleClass，addClass和removeClass函数来操作所需元素的类

例如，你可以这样做

 //remove any active elements
 $("ul.nav > li").removeClass("active");
 //Make the 'Tables' subnav element active
 $("ul.nav > li:contains('Tables')").addClass("active");

请注意:contains可能有点重，因为它会查找所选元素中的所有文本。 您可以使用其他选择器，例如：eq或nth-child请参阅http://api.jquery.com/nth-child-selector/

$("ul.nav li:eq(2)").addClass( "active");