I have a page that is laid out using DIVs, and it essentially consists of a header(menu), a left pane (about 20% page width), right pane (remaining 80%), and a footer. The height of the page is about 2-3 screen heights, so it is scrollable. It looks like this.
All I have in the left pane <div> is an image that occupies about 40% of the screen height. I’d like the image to basically “slide” up and down the screen as the user scrolls.
The menu takes up ~100 pixels in height, so the image begins in the left pane at ~px 100. Once the user scrolls down to the point where the image is at 0 px, I want the image to remain fixed at 0 px as the user scrolls (instead of obviously scrolling off the screen, like it does now). The footer also occupies ~100 px, so I want the image to obviously not display over the footer.
Is there a simple solution or JS/CSS trick to implement this?
There is a nice jQuery plugin called jScroll give it a try! You can see the demo here: http://www.wduffy.co.uk/jScroll/ as well as the download link.
Enjoy!