JQuery窗口滚动事件？

Question

我网页的头部有一个广告，页面底部有一个固定的广告，一直存在。我希望只有当用户向下滚动到头部广告以下时，才会出现固定广告。我查看了JQuery文档，但不确定该使用哪种方法。

- user1834464

---

你能否提供一个 jsFiddle 的示例吗？ - Halcyon

Answer 1

试一下这个：http://jsbin.com/axaler/3/edit

$(function(){
  $(window).scroll(function(){
    var aTop = $('.ad').height();
    if($(this).scrollTop()>=aTop){
        alert('header just passed.');
        // instead of alert you can use to show your ad
        // something like $('#footAd').slideup();
    }
  });
});

- Jai

---

你能否添加代码以防止反弹，例如触发太多的滚动事件？@Jai - horse

Answer 2

请查看jQuery.scroll()。您可以将其绑定到窗口元素以获得所需的事件挂钩。

滚动时，只需检查您的滚动位置：

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if ( scrollTop > $(headerElem).offset().top ) { 
    // display add
  }
});

- Kyle

Answer 3

作为提醒，scroll在最新版本的jQuery中已被弃用，推荐使用.on('scroll', handler)。事实上，前者一直都是后者的快捷方式。

从现在开始建议使用新形式：

$(window).on('scroll', () => {
  var scrollTop = $(window).scrollTop()
  if (scrollTop > $(headerElem).offset().top) { 
    // display add
  }
})

- diogo

Answer 4

检查用户是否滚动到了页眉广告之后，然后显示页脚广告。

if($(your header ad).position().top < 0) { $(your footer ad).show() }

我理解的您的需求是正确的吗？

- Jonathon Cwik