Sticky top Div followed by Div with scrolling content

Posted on 2011-05-04
Last Modified: 2012-05-11
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:

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.
Question by:Sivakatirswami
    LVL 38

    Expert Comment

    by:Tom Beck
    >>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 {

    Author Comment

    OK, I did exactly as you suggested and now I have an animated controls bar, ha!

    it slides up and down as we scroll the web page...

    LVL 38

    Accepted Solution

    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
          //scroll the message box to the top offset of browser's scrool bar
    LVL 38

    Expert Comment

    by:Tom Beck
    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;
        border:1px solid #CCCCCC;
        text-decoration: none;

    Author Comment

    "How Sweet It Is!"  Thanks Tommy boy... you were totally right on.

    works now, I removed the script, tweaks some margin settings and it all working well now.
    LVL 38

    Expert Comment

    by:Tom Beck
    Nice! Happy to help, thanks for the points.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Join & Write a Comment

    A colleague recently asked me about how to give his client a small part of the web site that could be completely under the client's control.  Since I have done this sort of thing before to add emergency banners to a web site, I decided I would creat…
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now