CODEWITHSUNDEEP
jqueryscroll
user1834464
user1834464

Reputation:

JQuery window scrolling event?

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.

Upvotes: 53

Views: 280856

Answers (4)

diogo
diogo

Reputation: 3976

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

Upvotes: 3

Jai
Jai

Reputation: 74738

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();
    }
  });
});

Upvotes: 116

Kyle
Kyle

Reputation: 4238

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

Upvotes: 28

Jonathon Cwik
Jonathon Cwik

Reputation: 1007

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?

Upvotes: 0

Related Questions