Wordpress Custom Jquery/Javascript Div Appearance After Delay/Scroll

by 5 replies
6
Is there any way to make a specific DIV appear when someone scrolls down to the bottom of a blog post? (And then after a set delay?).

So basically I'd like to make it so my opt-in form appears after the bottom of a blog post appears on a viewers screen, but after one second.

Is that possible with jquery/javascript?
#website design #appearance #custom #delay or scroll #div #jquery or javascript #wordpress
  • Yes, that is possible with jQuery
  • Do you know where I could go to learn how to code that, or where I could get an example of the code behind that?
    • [1] reply
    • First, set the CSS style of your opt-in div to "display: none".

      Then, you can do this for the jQuery part (assuming the ID of the div in question is "opt-in")...

      Code:
      $(window).scroll(function() {   
     if($(window).scrollTop() + $(window).height() == $(document).height()) {
         setTimeout(function(){
             $('#opt-in').show();
         }, 1000); // 1000 = 1 second delay
     }
});
      ^^ That code will only work if the user scrolls to the very bottom of the page. If they only get close to the bottom, it won't fire.

      If you want it to fire when they get close to the bottom, then you can do this instead (the following example will fire when they get within 200 pixels of the bottom)...

      Code:
      $(window).scroll(function() {   
     if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
         setTimeout(function(){
             $('#opt-in').show();
         }, 1000); // 1000 = 1 second delay
     }
});
  • Brandon - Thanks so much man.

    Really appreciate it.

    That's almost exactly what I'm looking for!

    The only thing is that because there are comments on my page, the size of the page (the height) will always be changing, so 200 pixels from the bottom could mean the opt-in box should show, but if there are 10+ comments, it might mean they would have to scroll past the opt-in box's location, to get it to show.

    See what I mean?

    Is there anyway to make it show based on the user either

    1) Scrolls past a different DIV
    2) Scrolling to the bottom of the post
    3) Scrolling to the location where the opt-in box will appear?
    • [1] reply
Join the discussion

Next Topics on Trending Feed