The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS A scrolling div on top of a scrolling div with brakes

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #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.

    Make sense? 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 :)


    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.


    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.


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


    @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.


    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.


    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?


    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.


    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.


    Have you had a look at using something like this:


    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


    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.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.