2

我有一个仅用 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;    
}
4

1 回答 1

2

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

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

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

于 2013-02-17T20:45:04.803 回答