css – 当position：fixed时无法获取滚动

顶级栏(固定) – 正如在Twitter和Facebook上看到的那样,试图模仿我正在进行的网络项目 – 无论我尝试多少,内容都会消失在滚动之外.本教程 http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/

但是,当分辨率改变或缩放时,内容会重叠.不要这样 – 正如我们在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初学者

解决方法

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

首先,在#footpanel和body上设置相同的min-width.您可能还希望将各种项目的高度设置为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>

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

css – 当position：fixed时无法获取滚动 – 元素从屏幕上消失

解决方法

猜你在找的CSS相关文章