JQuery window scrolling event?

JqueryScroll

Jquery Problem Overview

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.

Jquery Solutions

Solution 1 - Jquery

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

Solution 2 - Jquery

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

Solution 3 - Jquery

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?

Solution 4 - Jquery

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
  }
})
Categories
Recommended Jquery Solutions
Recommended Scroll Solutions

Previous Solution:

Java Files.write NoSuchFileException

JavaFileFile IoFilenotfoundexception

Next Solution:

Embedded PostgreSQL for Java JUnit tests

PostgresqlMavenJunitEmbedded DatabaseDatabase Driven

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser1834464View Question on Stackoverflow
Solution 1 - JqueryJaiView Answer on Stackoverflow
Solution 2 - JqueryKyleView Answer on Stackoverflow
Solution 3 - JqueryJonathon CwikView Answer on Stackoverflow
Solution 4 - JquerydiogoView Answer on Stackoverflow