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

Question

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

if i add a min-width(say,min-width:1000px) on the footpanel to contain the elements based on their individual width's -- on zoom,the content goes out of the screen without any scroll — Vivek Chandra, Nov 06 '11 at 07:59

Lucy Lou · Accepted Answer · 2011-11-06T22:48:30.830

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!

where were you since the past 3 days..!!!.. That did the trick!!.. still trying to decode the script.. either ways,a life saver!!.. thanks a million!!.. — Vivek Chandra, Nov 06 '11 at 18:26
is there a better way to achieve this ?.. coz,when on zoom -- trying to move the contents -- there's a slight bit of delay from when i scroll to when the javascript moves the contents -- not elegant 4 the eyes.. was checking gmail(Couple of items in the new Look are fixed) and it doesnt happen there.. was just wondering.. — Vivek Chandra, Dec 02 '11 at 10:35
Vivek, I'm afraid I do not know what you mean. I tried scrolling the script when zoomed in Chrome 15 and Firefox 8 and I don't see any delay. If there is too much content on the page, the browser may be a bit slow to render the effect. This can be made to look better with an animation. — Lucy Lou, Dec 03 '11 at 03:51

score 1 · Answer 2 · edited May 23 '17 at 12:34

1

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());
});

edited May 23 '17 at 12:34

Community

1
1

answered Dec 31 '13 at 01:34

deathlock

2,756
5
27
48

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

2 Answers2

Linked