• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 325
  • Last Modified:

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.
0
Sivakatirswami
Asked:
Sivakatirswami
  • 4
  • 2
1 Solution
 
Tom BeckCommented:
>>provide a way to prevent the top controls from flashing that will be a great help too.

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:0;
  }
0
 
SivakatirswamiAuthor Commented:
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...

0
 
Tom BeckCommented:
Not exactly. You missed this step  "...and skip the jquery. The jquery is making it flash."

You still have the jquery on the page though I don't see any need for it. If you need it for something you intend to add later than we can find a work around that would leave the jquery in place.

It's this javascript call to a function in the jquery-1.4.3.min.js file that is causing the bar to move. Can you live without this function call? It's not affecting any content on the page, just the controls bar.

<script type="text/javascript">
 
var wordlist; // this is a global
 
$(document).ready(function()
{
      //scroll the message box to the top offset of browser's scrool bar
      $(window).scroll(function()
      {
        ...
        ...
        ...
});
 
 </script>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Tom BeckCommented:
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;
  }
0
 
SivakatirswamiAuthor Commented:
"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.
0
 
Tom BeckCommented:
Nice! Happy to help, thanks for the points.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now