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.
If I understand what you’re asking about.
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 think trying to separate your page content into its own scrollable area is pretty non-standard, and you may run into issues you haven’t thought of yet.
I think we can get this to work with having the heading area stick to the top. We may need to include the top part of the page background as a background to the header area as well.
Do you have a link to a test page? That would help a lot. If not, can you post a screenshot of the preview and edit views?
I’m out most of today. If someone else doesn’t come up with something, I look at it tonight or tomorrow.
Here is simplified version that shows the issue. It shows the full contents of the RW edit window.
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.
Ok, I now get what you’re trying to do. Unfortunately, a solution hasn’t occurred to me yet, If anyone has ideas, please share with David.
Btw, I assume you’re putting more than just the site title in the sticky area, correct?
I still don’t get it.
In the sample page the banner is full screen and is second in the order. You described the banner at the bottom? The gallery between the title and the full screen banner?
Perhaps you could do a mock-up with descriptions of what’s fixed and what scrolls.
Nope… just 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.
Just my 2 cents.
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?
Most do…and I know that one does.
Just an FYI, all of Joes stacks (excluding the foundation packs) work in any theme.
. No they don’t. Target is however not a foundation stack.
Just want to make it clear for others reading this post.
Stacks written for foundation will only work with foundation and Stacks for foundry are for foundry. Most other stacks are fine with either framework.
Most other stacks should work with any theme or framework. You can rarely have compatibility issues between some stacks.
Ge tting back to the content.
One of the reasons I was having trouble understanding what you were talking about was I was looking at the sample page on my iPad.
You see, the banner you’re talking about “hero and locked to background” is using CSS to create The Parallax scrolling effect (“locked to the background”).
Just to let you know that doesn’t work on most mobile devices. That means depending on your market about half your visitors will just see banner scroll normally.