Show Div when scroll position

by

Basically, you want to add a “hideme” class to every element you want hidden (then you set that class to “opacity:0”;

Then, using jQuery you set a $(window).scroll() event to check the location of the bottom of every “hideme” element against the bottom edge of your visible window.

Here’s the meat of it …

/* Every time the window is scrolled ... */
$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.hideme').each( function(i){

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it in */
        if( bottom_of_window > bottom_of_object ){

            $(this).animate({'opacity':'1'},500);

        }

    }); 

});

Here’s a full jsfiddle: http://jsfiddle.net/tcloninger/e5qaD/

More Related Contents:

  1. Animate scroll to ID on page load
  2. Scroll to a div using jQuery
  3. Rotating a Div Element in jQuery
  4. jQuery Scroll to bottom of page/iframe
  5. Can I change the scroll speed using css or jQuery?
  6. jQuery scroll to ID from different page
  7. Activate CSS3 animation when the content scrolls into view
  8. Animate background image change with jQuery
  9. jQuery .scrollTop(); + animation
  10. Detect middle button click (scroll button) with jQuery
  11. More efficient way to handle $(window).scroll functions in jquery?
  12. jquery change background color user scroll
  13. Correct way to animate box-shadow with jQuery
  14. How do I scroll a row of a table into view (element.scrollintoView) using jQuery?
  15. Differentiate between scroll up/down in jquery? [duplicate]
  16. How do I get the height of a div’s full content with jQuery?
  17. JQuery synchronous animation
  18. jquery – keep window from changing scroll position while prepending items to a list?
  19. Disable scrolling when changing focus form elements ipad web app
  20. jQuery $.animate() multiple elements but only fire callback once
  21. jQuery trigger when 2/3s of div are in viewport
  22. How to make div follow scrolling smoothly with jQuery?
  23. How to detect horizontal scrolling in jQuery?
  24. How do you animate the value for a jQuery UI progressbar?
  25. jQuery delay() – how to stop it?
  26. scroll up and down a div on button click using jquery
  27. Use jQuery to check mousewheel event without scrollbar
  28. jQuery: detecting reaching bottom of scroll doesn’t work, only detects the top
  29. jquery.animate background-position doesn’t work
  30. Detect user scroll down or scroll up in jQuery [duplicate]

Leave a Comment