CODEWITHSUNDEEP
javascriptcssimagehtmlscroll
Nikhil Goel
Nikhil Goel

Reputation: 63

Keep image on top while scrolling

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?

Upvotes: 2

Views: 1001

Answers (1)

carlos
carlos

Reputation: 317

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!

Upvotes: 2

Related Questions