Search code examples
jqueryhtmlpositioning

jquery div positioning only when scroll up


I have this jquery

http://jsfiddle.net/4Ns44/5/

The idea is to open an expanded view of a div always in the view port. This works fine. And I want to stick to this method (NO fixed position divs). But when the window is scrolled, I would like the expand window to move up as user scrolls up, but it SHOULD not scroll down if user scrolls down.

In the fiddle, if the user scrolls down after scrolling up, the expand div will scroll down until where it was originally opened.

Can anyone throw some light into margin-top and positioning on scroll?


Solution

  • Try this: http://jsfiddle.net/4Ns44/6/

    It updates the expandY variable everytime you scroll and doesn't let it move down the page from where it was previously.

    One thing to keep in mind: You should use e.preventDefault() to stop the link from being followed instead of return false. preventDefault() will still allow other events to fire, while return false will stop event execution in it's tracks. It can cause confusion if you were to add other click handlers etc.