Jquery如果滚动是一定数量的像素

时间:2011-11-16 07:52:19

标签: jquery scroll

是否有内置的jQuery函数来确定滚动的长度?

我正在尝试编写一个函数,如果用户从顶部滚动了50个像素,它将为div添加一个类。

所以代码看起来像这样:

if(userHasScrolled) {
     $('#myDiv').addClass('hasScrolled');

}

1 个答案:

答案 0 :(得分:51)

您可以在滚动处理程序中查看$(document).scrollTop()

var $document = $(document),
    $element = $('#some-element'),
    className = 'hasScrolled';

$document.scroll(function() {
  if ($document.scrollTop() >= 50) {
    // user scrolled 50 pixels or more;
    // do stuff
    $element.addClass(className);
  } else {
    $element.removeClass(className);
  }
});

如果您想要添加类名(不需要其他操作),可以缩短为:

var $document = $(document),
    $element = $('#some-element'),
    className = 'hasScrolled';

$document.scroll(function() {
  $element.toggleClass(className, $document.scrollTop() >= 50);
});

请参阅http://api.jquery.com/scrollTop/

请注意,使用scroll事件处理程序效率非常低。