- This topic is empty.
February 18, 2012 at 2:44 pm #36723
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.
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!February 19, 2012 at 1:22 pm #96951Dan ChristofiParticipant
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.February 19, 2012 at 7:46 pm #96973MottieMember
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.February 19, 2012 at 8:20 pm #96974February 19, 2012 at 8:25 pm #96976MottieMemberFebruary 19, 2012 at 9:05 pm #96979
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.February 20, 2012 at 10:30 am #97015
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?February 20, 2012 at 9:20 pm #97057
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.February 20, 2012 at 10:54 pm #97062WellingtonianKiwiMember
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.February 20, 2012 at 11:11 pm #97068
Have you had a look at using something like this: http://jonraasch.com/blog/scrolling-parallax-jquery-pluginFebruary 21, 2012 at 5:50 pm #97142WellingtonianKiwiMember
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 JopaFebruary 29, 2012 at 11:41 am #97760
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.
- The forum ‘CSS’ is closed to new topics and replies.