unable to get the scroll when position:fixed — elements disappears form the screen

问题

Top Bar (fixed) - As seen on twitter and facebook,tried to mimic the same on a web project that i'm working on -- no matter how much i try,the content disappears beyond scroll.Tried this tutorial http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/

but,the contents in that overlaps when resolution is changed or when on zoom.Do not want that -- as we see on twitter/FB - want the scroll to come up on zoom (or lower resolutions)

Been flocking around this issue since 2days with no positive outcome.

Here is the test code that i've edited from the tutorial --

        <html>
        <style type="text/css">
        #footpanel {
            position: fixed;
            top: 0; left: 0;
            z-index: 9999;
            background: #e3e2e2;
            border: 1px solid #c3c3c3;
            border-top: none;
            width: 100%;
            height: 25px;
            }
        #footpanel ul {
            padding: 0; margin: 0;
            float: left;
            width: 100%;
            list-style: none;
            border-bottom: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
            }
        #footpanel ul li{
            padding: 0; margin: 0;
            float: left;
            position: relative;
        }
        #footpanel ul li a{
            padding: 5px;
            float: left;
            height: 16px; width: 36px;
            text-decoration: none;
            color: black;
            position: relative;
        }
        #footpanel a.home{
            width: 50px;
            padding-left: 40px;
            border-right: 1px solid #bbb;
            text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
        }
        #footpanel a.chat{
            width: 126px;
            border-left: 1px solid #bbb;
            border-right: 1px solid #bbb;
            padding-left: 40px;
            text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
        }
        #footpanel li#chatpanel, #footpanel li#alertpanel { float: right; }  /*--Right align the chat and alert panels--*/

        </style>

        <div id="footpanel">
            <ul id="mainpanel">
                <li><a href="#" class="home">A </a></li>
                <li><a href="#" class="profile">B </a></li>
                <li><a href="#" class="editprofile">C </a></li>
                <li><a href="#" class="contacts">D </a></li>
                <li><a href="#" class="messages">E </a></li>
                <li><a href="#" class="playlist">P </a></li>
                <li><a href="#" class="videos">V </a></li>
                <li id="alertpanel"><a href="#" class="alerts">S</a></li>
                <li id="chatpanel"><a href="#" class="chat">F (<strong>18</strong>)</a></li>
            </ul>
        </div>

        </html>

What is happening -- on zoom(or lower resolution) the contents of the footpanel is coming out (i can prevent this with overflow:hidden , but that's not what i want) of the container(footpanel)

What i want it to do -- like twitter/FB,i want a scroll to come in and the footpanel to save its layout and not fall out of place.

Please help --CSS beginner

回答1:

I can't think of a way to do this in pure CSS and Twitter seems to use Javascript to achieve that effect.

First, set the same min-width on #footpanel and the body. You may also want to set the heights of your various items to auto or em equivalents so they resize nicely on zoom and text resize.

Then put this Javascript on your page:

<script type="text/javascript">
function hscrollbar() {
    /* First, we need the horizontal scroll position of the viewer's display,
       but there are different ways to call it in JS depending on browser.
       I'm using the if/else shorthand notation to detect if a call is legit: 
       somevar = (statement) ? statement_true_value : statement_false_value */
    var left = 
        /* window.pageXOffset should work for most recent browsers: */
        window.pageXOffset ? window.pageXOffset : 
        /* If it DOESN'T, let's try this: */
        document.documentElement.scrollLeft ? document.documentElement.scrollLeft : 
        /* And if THAT didn't work: */
        document.body.scrollLeft;

    /* Now that we have the horizontal scroll position, set #footpanel's left 
       position to NEGATIVE the value, so it APPEARS to follow the scroll: */
    document.getElementById('footpanel').style.left = -left;
}
window.onscroll = hscrollbar; /* Call the function when the user scrolls */
window.onresize = hscrollbar; /* Call the function when the window resizes */
</script>

Remove all comments in gray to unbloat the code!

回答2:

Just in case somebody stumbled upon this answer (like me) and didn't find @LucyLou's answer working (with all respect), I got it working from @Vimal's answer on another question:

Don't need to set the min-width and put this Javascript instead:

$(window).scroll(function(){
  $('#footpanel').css('left',-$(window).scrollLeft());
});

来源：https://stackoverflow.com/questions/8025818/unable-to-get-the-scroll-when-positionfixed-elements-disappears-form-the-scr

标签

css

css-position