Add to Favorites
CSS Fixed Position
Jul 09, 2013
by
0
Ever need something to stay put as a user scrolls? Have you used javascript in the past to achieve this result?
You should take a look at css position: fixed. Fixed position means that it will stay in the same place relative to the browser viewing pane regardless of scroll position. You should note that a fixed position element will overlap other elements.
If you set a fixed position in a header, it would go over the top of the body as the user scrolled remaining at the top of the browser pane.
The same goes with a footer, it would be at the bottom on top until you scrolled to the bottom.
Fixed positioning can also come in handy for a left navigation menu that you want to carry with the user as they scroll down in an article. If you take the navigation element and add a fixed position to it, once the user scrolls down past the element then the element will stay on the page where it belongs.
CSS fixed positioning works in all the major browsers, so it's a good option to use instead of resorting to javascript or other methods that may require more overhead or code.
Leave a comment
To leave a comment, please log in / sign up
RSS Feed
Facebook
Twitter
LinkedIn
YouTube