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?

 

Thanks,

 

Don

0 votes

3 answers

3831 views

ANSWER



Don,

 

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.

 

r.

1 votes



Ha! Thanks Reid! I'm the guy that sent you an email! Great job on Silence of The Wolves!
10/21/2013


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.

0 votes



Thanks, Don!

 

r.

0 votes



Thank you for that last line about not seeing certain features in edit mode, and needing to view the front end to have them work. That has plagued me in some of my attempts to use skrollr.
10/26/2013

Reid, Two basic problems with the sticky trick using skrollr:

  1. It's disappeared every time i move to different script
  2. There's a glitch - something to do with the positioning - it keeps moving to the left side of the screen Can you help me??

Thanks!

02/26/2014