A scrolling div on top of a scrolling div with brakes

[albo]

Hoping people can help me figure out how to do this. I tried to search here in the forum a bit but I’m not sure what search-terms to use…

The basic idea:

A page with a background image that’s about twice as tall as an average-height browser window, and a significantly taller but much thinner div on top of that. I’d like the whole shebang to scroll down until you reach the bottom of the background image, and then I want that div to stop scrolling, but the taller div to keep scrolling on top of it until it reaches it’s own bottom.

Make sense?

http://boingboing.net/ does something similar, though their “sticky” info div on the right isn’t on top of the “slidey” main-content div on the left. I’ve tried looking through their code to figure out how they’re doing it, but I’m a dope and I can’t get no satisfaction.

FOR EXTRA POINTS! – ideally I’d love for the background to be a centered, re-sizing, fixed-aspect-ratio, full-page image :)

Thanks!

[Dan Christofi]

I’ve found that at a certain point in scrolling, it adds a class to it which changes the position to fixed. But I’m not sure how to do that.

[Mottie]

The problem with using position fixed is that it doesn’t work in on iPhones & iPads.

I did find this really cool plugin that uses canvas to draw everything… check out this awesome demo.

[joshuanhibbert]

@Mottie iOS5 has addressed that issue. It works, reasonably well.

[Mottie]

@joshuanhibbert Hmm, ok.. anyway the readme for that plugin says it’s not supported on the iPhone/iPod but it is on the iPad.

I wonder why there are still issues with plugins then? I was told that my visualNav plugin doesn’t work on the iPad and neither does jQuery Waypoints.

[joshuanhibbert]

No idea, sorry. Strange that it works on iPad but not iPhone, when they are essentially running the same OS. Also, there are still heaps of people on iOS4 or earlier.

[albo]

Excellent! Now – getting back to the actual subject of this thread… ;)

Any thoughts on doing what I want to do? I took a quick look at jmpress don’t know how would be helpful?

[joshuanhibbert]

I remember seeing a plugin that scrolled the background at a different speed so that when you get to the bottom of the content, you also get to the bottom of the background (similar to parallax), but I can’t find it anywhere.

[WellingtonianKiwi]

Hi Albo,

Looking for scrolling div on top of a scrolling div with brakes too . Let me know if you find anything and I will do the same.

[joshuanhibbert]

Have you had a look at using something like this: http://jonraasch.com/blog/scrolling-parallax-jquery-plugin

[WellingtonianKiwi]

Thanks for the help Joshua, but I think I have found what I am looking for. Now to implement it…

Albo.. here is the link.. Greg Jopa

[albo]

Hey guys – Thanks for the suggestions. The Jopa solution seems too limited – it just does the one very specific thing, as far as I can tell – and I don’t know how to tweak it to do what I want. The parallax idea is really cool and comes close, but the full-page image doesn’t maintain it’s aspect ratio.
Maybe if I had more time and knew jquery… I redesigned the site without the div-with-brakes.

[Author]

Posts