In my real website I have actual content but this example should suffice. LOGO is actually a logo image. The toolbar is also an image. I used the following code to keep the toolbar at the bottom by simply using bottom:0 as opposed to top:35px. I basically want the toolbar to stick to the top of the page and only get pushed down by the logo. When the uesr scrolls down the toolbar should stay at the top of the page. All content should flow under the toolbar hence the high z-index. The way I have it the toolbar is riding at 35px the whole way down. I know the reason why but I do not know how to accomplish what I am trying to.
<html>
<head>
<style type="text/css">
#logo {
width:100%;
height:34px;
}
#toolbar {
position: fixed;
top: 35px;
z-index:1000;
}
</style>
</head>
<body>
<div id="logo">LOGO</div>
<div id="toolbar">TOOLBAR</div>
<div id="content">
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
</div>
</body>
</html>
There is no way to do this without some Javascript. I would recommend Bootstrap's Scrollspy for this type of functionality. You can actually see it in use on their site.