我网页的头部有一个广告,页面底部有一个固定的广告,一直存在。我希望只有当用户向下滚动到头部广告以下时,才会出现固定广告。我查看了JQuery文档,但不确定该使用哪种方法。
试一下这个: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();
}
});
});
请查看jQuery.scroll()。您可以将其绑定到窗口元素以获得所需的事件挂钩。
滚动时,只需检查您的滚动位置:
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if ( scrollTop > $(headerElem).offset().top ) {
// display add
}
});
scroll
在最新版本的jQuery中已被弃用,推荐使用.on('scroll', handler)
。事实上,前者一直都是后者的快捷方式。$(window).on('scroll', () => {
var scrollTop = $(window).scrollTop()
if (scrollTop > $(headerElem).offset().top) {
// display add
}
})
检查用户是否滚动到了页眉广告之后,然后显示页脚广告。
if($(your header ad).position().top < 0) { $(your footer ad).show() }
我理解的您的需求是正确的吗?