Create static toolbar on webpage that follows scroll in HTML

Question

How do you make a toolbar like object in HTML that follows the user's scroll so that it is always at the top of the viewable page?

Thanks in advance!

Answer 1

Do you specifically need it to scroll (animate) or just a static (toolbar like) object?

EDIT:

Ok so to add a static(toolbar like) object that has a width which is 100% of the page, and a height of say 25px, you would do this.

HTML

<div id="toolbar">
    <p>Some content...</p>
</div>

CSS

#toolbar {
    position: fixed;
    width: 100%;
    height: 25px;
    top: 0;
    left: 0;
    padding: 5px 10px; /* some styling, please note overall height of the object will be 35px due to 5px padding on top/bottom. */
    background: #ccc; /* some styling */
    border-bottom: 1px solid #333; /* some styling */
}

Please note that this might overlap any content that you have at the top of the page, so use a top margin to push it down under the toolbar or simply set:

body {
    margin-top: 35px;
}

Good luck,

Marko

Answer 2

css

.selector
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

html

<div class="selector">
  ... content for bar here ...
</div>