51

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.

1
  • Can you post a jsFiddle for an example?
    – Halcyon
    Jan 11, 2013 at 17:15

4 Answers 4

113

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();
    }
  });
});
1
  • 1
    Could you add the code to prevent bounce, e.g. firing too much scroll event? @Jai
    – horse
    Sep 3, 2016 at 11:03
28

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
  }
});
0
1

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
  }
})
0

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?

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.