Question

我有一个仅用css和html编码的菜单栏，栏位固定在顶部但是当屏幕调整大小并且你试图在x轴上滚动页面时，栏位于左上角，您可以滚动浏览小窗口，但无法滚动页面。

这是我的代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="StyleSheets/StyleSheet.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>TeraShare</title>
        <script type="text/javascript" src="JQuery/JQuery.js"></script>
        <script type="text/javascript" src="Scripts/JavaScript.js"></script>
    </head>

    <body>
        <div id="Wrapper">
            <div id="Menu">
                <div id="Logo"><a href=""><img src="Pictures/Logo.png" /></a></div>
                <div id="Buttons">
                    <a href="LogIn/"><div class="Button" title="LogIn">LogIn</div></a>
                    <a href="Register/"><div class="Button" title="Register">Register</div></a>
                    <div class="Button" title="Menu">Menu&nbsp;<span class="Triangle"></span></div>
                </div>
            </div>
            <div id="Content">
                <div id="Fix"></div>
            </div>
        </div>
    </body>
</html>

CSS：

    #Menu
{
    position:fixed;
    top:0px;
    width:100%;
    min-width:965px;
    height:49px;
    border-bottom:rgba(82,82,82,1);
    box-shadow:0 2px 3px rgba(182, 182, 182, 0.75);
    background-color:rgb(68, 68, 68);
    z-index:100;    
}

Answer 1

将固定div的left更改为滚动时窗口的scrollLeft值。

$(window).on('scroll', function () {
    $("#Menu").css('left', '-' + $(this).scrollLeft() + 'px');
});

http://jsfiddle.net/ebeBw/1/

如果窗口太小，则滚动固定Div

1 个答案: