I have an ad in my header and a fixed ad at the bottom of my page that is always there. I want the fixed ad to appear only if the user has scrolled under the header ad. I looked into the JQuery documentation, but I'm not really sure what I should use.
4 Answers
Try this: 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();
}
});
});
-
1Could you add the code to prevent bounce, e.g. firing too much scroll event? @Jai– horseSep 3, 2016 at 11:03
See jQuery.scroll(). You can bind this to the window element to get your desired event hook.
On scroll, then simply check your scroll position:
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if ( scrollTop > $(headerElem).offset().top ) {
// display add
}
});
As a heads-up, scroll
has been deprecated in the most recent versions of jQuery in favor of .on('scroll', handler)
. Actually, the former has always been a shortcut for the latter.
It's advisable to use the new form from now on:
$(window).on('scroll', () => {
var scrollTop = $(window).scrollTop()
if (scrollTop > $(headerElem).offset().top) {
// display add
}
})
Check if the user has scrolled past the header ad, then display the footer ad.
if($(your header ad).position().top < 0) { $(your footer ad).show() }
Am I correct at what you are looking for?