如果窗口太小，在固定分区上滚动

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

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

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

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

相关内容

最新更新

热门标签：