Scroll Element with Window once a user scrolls past the element

Revision: 31334

at September 3, 2010 02:08 by reynish

Initial Code

// Scroll Element with Window
// When window scrolls do this
$(window).scroll(function() {

  // scrollYpos variable is amount of pixels scrolled from the top of the page
  var scrollYpos = $(document).scrollTop();

    // If Pixels from top is greater than 550 (That was the number of pixels between the top of page and my scrolling element. you may want to be more fancy)	
    if (scrollYpos > 550 ) {

      // Animate margin top of scrolling element -540px (remember my 550 above? this is -10px for a nice margin)
      $('#scrollingDiv').animate({'margin-top': scrollYpos - 540 }, {duration: 200, queue: false});

    } else {
      
      // If you scrolled up to quickly then it would leave the div where it was. This pushes it back to it's starting position
      $('#scrollingDiv').animate({'margin-top': 0 }, {duration: 200, queue: false});
    }
}); // Scroll Element with Window

Initial URL

Initial Description

I wrote this from scratch :)

Basically I wanted a DIV to scroll with the window but it's not visible to begin with on the page. So this does it when the user scrolls past the beginning of that element.

Initial Title

Scroll Element with Window once a user scrolls past the element

Initial Tags

window

Initial Language

jQuery

Choose a language for easy browsing: