What code or script am I looking for in order to sticky a menu to the top of the website even as the user scrolls down the page?
A:
CSS position:absolute or position:fixed (based on what you're trying to do. You may stick it to the viewport (the screen) or to the document or to some other element.
But CSS positioning.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
drachenstern
2010-09-26 22:21:14
Why the downvote?
drachenstern
2010-09-26 22:23:18
No, neither position: absolute nor position: relative will do what is asked. Of the three links you mention, I recognise only one — the awful W3Schools which is best avoided. http://www.wait-till-i.com/2010/09/26/promote-better-javascript-documentation-with-promotejs/
David Dorward
2010-09-26 22:23:28
A:
position: fixed
Only use this for horizontal menus though — otherwise links to document fragments will put the content you are linking to under the menu.
Consider not using this, scrolling back up to the top is easy, and screen real estate is valuable (especially on a small display, such as a laptop).
David Dorward
2010-09-26 22:22:09
Or if you do use it, use it with an autohide and a onmouseover event and only change it's position using javascript (so on a no-script it goes back to the default position on the page) after the document loads.
drachenstern
2010-09-26 22:22:57
A:
You are looking for fixed positioning.
#someMenu {
position:fixed;
}
From the documentation position fixed:
Generates an absolutely positioned element, positioned relative to the browser window. The element's
Matthew Manela
2010-09-26 22:22:18
A:
#idOfElementToFix {
position: fixed;
top: 10px; /* 10px from top of browser viewport */
right: 10px; /* 10px from right of browser viewport */
}
Bear in mind that this could easily end up covering other elements as the user scrolls the page, so it's best to leave an empty gutter for it to occupy.
Just as food for thought, here's a link to one of the better tutorials for such a thing, by Remy Sharp: jQuery for Designers
David Thomas
2010-09-26 22:23:01