Question

顶部栏（固定） - 正如在Twitter和Facebook上看到的那样，试图在我正在处理的网络项目上模仿相同的内容 - 无论我尝试多少，内容都会消失在滚动之外。本教程{已完成{ {3}}

但是，当分辨率改变或缩放时，内容会重叠。不要这样 - 正如我们在twitter / FB上看到的那样 - 想要滚动显示缩放（或更低分辨率）

自2天以来一直在围绕这个问题而没有积极的结果。

以下是我从教程中编辑的测试代码 -

        <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>

发生了什么 - 在缩放（或更低的分辨率）脚板的内容出来（我可以通过溢出：隐藏，但这不是我想要的）容器（footpanel）

我想要它做什么 - 比如twitter / FB，我想要一个滚动进来和脚板保存它的布局而不是不合适。

请帮忙 --CSS初学者

Answer 1

我想不出在纯CSS中这样做的方法，Twitter似乎使用Javascript来实现这种效果。

首先，在min-width和#footpanel上设置相同的body。您可能还希望将各种项目的高度设置为auto或em等效项，以便在缩放和文本调整大小时很好地调整大小。

然后将此Javascript放在您的页面上：

<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>

删除灰色的所有注释以取消代码！

Answer 2

以防万一有人偶然发现这个答案（像我一样）并且没有找到@ LucyLou的答案（尽管如此），我从@ Vimal的回答on another question得到了它：

不需要设置最小宽度并改为使用此Javascript：

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

位置时无法获取滚动：固定 - 元素从屏幕上消失

2 个答案: