Sivakatirswami
asked on
Sticky top Div followed by Div with scrolling content
We are working on our own ebook reader that digs files from an epub package and then produces a web display... It is going pretty well. see:
http://dev.himalayanacademy.com/book/grv/web/8
We want to have controls be persistent at the top of the display (this will eventually be called into other pages via iFrame) our strategy was to set the top div to position absolute and then the div underneath to position:absolute; top:200px [set extra big for testing purposes]
When you open the page initially it appears as expected. The book content starts 200 px down the page... but when we start scrolling, the content, instead of being locked into an invisible frame whose top is actually 200 px from the top of the body... instead the whole thing is moving up.
Can anyone see how we can fix this? we want the scrolling material to "disappear" at the top at the pixel location we set for the top of the page-content div and not appear to be sliding underneath the top controls
Also if you can provide a way to prevent the top controls from flashing that will be a great help too.
http://dev.himalayanacademy.com/book/grv/web/8
We want to have controls be persistent at the top of the display (this will eventually be called into other pages via iFrame) our strategy was to set the top div to position absolute and then the div underneath to position:absolute; top:200px [set extra big for testing purposes]
When you open the page initially it appears as expected. The book content starts 200 px down the page... but when we start scrolling, the content, instead of being locked into an invisible frame whose top is actually 200 px from the top of the body... instead the whole thing is moving up.
Can anyone see how we can fix this? we want the scrolling material to "disappear" at the top at the pixel location we set for the top of the page-content div and not appear to be sliding underneath the top controls
Also if you can provide a way to prevent the top controls from flashing that will be a great help too.
ASKER
OK, I did exactly as you suggested and now I have an animated controls bar, ha!
http://dev.himalayanacademy.com/book/grv/web/10
it slides up and down as we scroll the web page...
http://dev.himalayanacademy.com/book/grv/web/10
it slides up and down as we scroll the web page...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Just realized you also missed the most important step of all, this one ..."change the position setting to position:fixed;". You still have it as position:absolute. Your css for the #controls should look like this:
#controls {
border: solid 1px black;
width: 80%;
position: fixed; /*IMPORTANT STEP*/
top: 0; left: 7%;
z-index: 10;
background:#ffc;
padding:10px;
border:1px solid #CCCCCC;
font-weight:bold;
text-decoration: none;
}
#controls {
border: solid 1px black;
width: 80%;
position: fixed; /*IMPORTANT STEP*/
top: 0; left: 7%;
z-index: 10;
background:#ffc;
padding:10px;
border:1px solid #CCCCCC;
font-weight:bold;
text-decoration: none;
}
ASKER
"How Sweet It Is!" Thanks Tommy boy... you were totally right on.
http://dev.himalayanacademy.com/book/grv/web/10
works now, I removed the script, tweaks some margin settings and it all working well now.
http://dev.himalayanacademy.com/book/grv/web/10
works now, I removed the script, tweaks some margin settings and it all working well now.
Nice! Happy to help, thanks for the points.
If you want the top control bar to remain where it is while the rest of the content scrolls just change the position setting to position:fixed; and skip the jquery. The jquery is making it flash.
>>we want the scrolling material to "disappear" at the top at the pixel location we set for the top of the page-content div.
If I understand you correctly then try this:
Add a div wrapper around the top controls
<div id="controlsWrapper">
<div id="controls">
...
</div> <!-- controls -->
</div> <!-- controls wrapper -->
And style it like this:
#controlsWrapper {
width:100%;
height:50px;
background-color:#fff;
margin:0;padding:0;
position:fixed;top:0;left:
}