I set up a sample page with foundation (under www.test4web1234.de, see page ‘projects’) where I want to hide top bar when you scroll down and make it visible when you scroll up.
I tried to use target with the setting ‘pin to top’ and the condition ‘hide on scroll down’ for this. I placed top bar into target (you can see it in the top gutter when you scroll down), but it gets covered by the top line of pictures of the respective page.
On the bottom, where I have the copyright sign, contact etc. in the dark grey box, target works correctly.
How can I bring target with top bar to the front, so it sits on top level above the content?
Without knowing exactly how you have your page setup, it’s difficult to suggest the perfect solution. However, you probably need some padding in there somewhere. This is with padding added to the bottom of the top bar, but it also seems to get added between the rows of images, so not quite right.
I got closer to a solution by setting the Z-Index in target to 100. At least now top bar stays on the top layer. But I still have to figure out how it can disappear completely. At the moment, I have a strip of maybe 20 px height always remaining visible on top, no matter how much I scroll up or down.
Do you have any idea, how I can get rid of this 20px high strip (white in my design)?
see the updated project page of my site at:
I’ve found a solution: Setting the top and bottom margin of the divider to 0.00 rem.
But what always disturbs me is that when I put top bar into target (pin to top) I had to change left and right margin of top bar by 20px to get the same visual result as before. The same with the footer, when put into target (pin to bottom).
Why do stacks within stacks always change their margin properties?
