I use RW8.4, Foundry, and Stacks 3. I want the scrollable contents of a stack to be restricted to the lower part of the browser window. I have a page title at top that is locked to the background image and a gallery of many thumbnails below and I want the thumbnails to only scroll below the title, not over it. As it is now, scrolling the page makes the thumbs flow up and over the title and off the top of page.
I can think of two ways this could be done, but don’t know how to do either:
have a gallery in some kind of stack that sticks to the bottom of the page and is of a fixed size and allows the gallery to scroll (Foundry’s Sticky Content stack doesn’t allow it to scroll), or
have some kind of transparent stack at top with fixed size that prevents the gallery stack that follows from scrolling up over it.
If I understand what you’re asking about.
Why not put the page title in a Sticky content stack, set the Sticky Position to top.
Then Place the Gallery below the stickyposition/page title. It will scroll below the title.
Thanks Doug, but that’s exactly the first thing I did. The gallery scrolls up under the title. The gallery scrolls uses the full page height for scrolling instead of being limited to the area below the lower edge of the title.
Unless the title area is semitransparent, is there really any effective difference?
If the lower are is a box that scrolls content in itself, the content will disappear when it gets to the top of it (which is also the bottom of the upper, title area). If the content scrolls up under the upper title area instead of just in the lower area, it still disappears at the same point. Other than a slightly longer scroll bar, I don’t see the difference. Can you explain more about how the separate scrollable area would make it different?
Yes, that is precisely it - I have a Page Header stack inside a Sticky Content stack which has Style set to None so that the background of the Page Header is transparent. The result is that the gallery contents in the stack below the Sticky Content stack scrolls up under the Page Header and is visible under it until it scrolls off the top of the browser. I want the gallery, when scrolled, to disappear when it gets to the edge of the Page Header stack.
I’m still not getting it. Is that Banner set to Hero or are you only using it as a fixed height background behind the site title? Is the gallery supposed to flow over the Banner image and disappear before it get to the title text or is it supposed to disappear at the bottom of the Banner image?
Can you publish your work in progress page to a temporary page on your site and give us an URL?
Here is the page it creates.
The banner is hero and locked to background. The Sticky sticks to the top of page and is transparent (style=none). So effectively, the banner is the lowest level, the page header is the top layer, and the gallery is the only thing that scrolls and is in the middle layer and slides between the banner and the page header. The idea is to have the gallery, as it scrolls up, disappear before it hits the title.
When I say “bottom”, I am not describing the positions of the stacks in the RW editor. I am describing the effect when it displays. What I set up in the RW editor has the effect of the displayed web page being in “layers” - it is like the banner image (which is locked to the background) is at the lowest layer, then the scrollable gallery is a layer higher, and finally the page title is in a layer above that. The web page is what you see as you look down through the layers with gallery sliding over top of the banner image but the title stays visible above the gallery.
Ok, in that case I’m going to politely suggest you rethink having the title sticky. More and more websites are pinning things to the top of the browser window and it drives me nuts. Enough so, that it will cause me to move on from a site. If something is pinned to the top/bottom then it really needs to be an unobtrusive as possible (small) and must be a vital piece of the site otherwise it wastes valuable space.
Most of my web browsing is on a 13" MBP. After Safari’s location bar and the tab bar, I end up with a little over 710 pixels of vertical space for viewing websites. A lot of sites pin something that takes up 100-150 of those pixels and it leaves very little room for viewing the actual web content. You know, they stuff I actually came to your website to see/read! I know a lot of people who browse on iPads in landscape. They suffer the same issue only worse.
Thanks Joe… that’s a stack I hadn’t run into in my search. Looks like that could work. But one thing (that I guess I never clearly understood) - do stacks written for Foundation work reliably in a Foundry page?