Sticky Header/Anchored Elements
How do you make an element stick to the top of the page so it is there no matter how far down you scroll? Like a sticky header or Nav.
Also, can you anchor an elements to a page? Say, a small graphic or text box that will stay anchored on page while the background image whizzes by?
You can fix the position of elements using the Skrollr dialog. To make a sticky header, you can make a new rule in Skrollr and add: position: fixed; z-index: 1000; width: 100%;
If you wanted a sticky footer, use the above, but add bottom: 0px;
Similarly, by specifying the bottom, top, left and right positions, you should be able to put an element anywhere on the page.
Be advised, you won't see them function this way while you're editing, only when viewing them from the front end.
Thanks Reid, that works fine for me. But how do I fix other elements on top of the header? As soon as I add position: fixed; the element will be visible when I enter the front end but will disappear as soon as I start scrolling.
- It's disappeared every time i move to different script
- There's a glitch - something to do with the positioning - it keeps moving to the left side of the screen Can you help me??