HTML

<div id="headers">
    <header>
        <div id="Logo">
            <img alt="SiteLogo" title="KAS" src="Images/kas.png" />
        </div>
        <div id="LogoText">Sample Site</div>
        <nav>
            <ul>
                <li><a href="#">HOME</a>

                </li>
                <li><a href="#">ABOUT US</a>

                </li>
                <li class='has-sub '><a href="Products.aspx">PRODUCTS</a>

                    <ul>
                        <li><a href="#">Item 1</a>

                        </li>
                        <li><a href="#">Item 2</a>

                        </li>
                        <li><a href="#">Item 3</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">SERVICES</a>

                </li>
                <li id="current"><a href="#">ENQUIRY</a>

                </li>
            </ul>
        </nav>
    </header>
</div>

小提琴

演示

全页结果

问题

正如你可以在看演示我不能够访问所有的菜单，但如果是像整页整页的结果我'能够访问所有菜单的

需要：

我需要的是以下

头应该被固定到顶部
我需要水平滚动，即使我改变浏览器的宽度访问所有的菜单

Answer 1:

好了，这是不可能的纯CSS，因为这是怎样position: fixed; 的行为，如果你想要一个jQuery的解决方案，我知道你有没有标记，但你没有任何其他方式..（或使用JS）

$(document).on('scroll', function() {
    $('#headers').css('top', $(this).scrollTop());
});

演示

在这里，我轻推top 在文档的滚动属性，所以你的元素停留position: absolute; 但它的行为就好像它是fixed 。

只要确保你摆脱的position: fixed; 从#headers ，你不需要，现在，还， header背景会超过的视口，以便分配一些砍掉height ，以您的header元素，并指定background-color ，以及

header {
    width: 1000px;
    height: 80px;
    margin: 0px auto;
    padding: 0px;
    top: 0;
    background-color: #333;
}

演示2

演示2 （全页，使用内滚动条，而不是外一个）

Answer 2:

为了实现你想你需要添加的结果overflow-x: auto到你的CSS。

#headers {
    width: 100%;
    background-color: #333;
    margin: 0px 0px 0px 0px;
    top: 0;
    position: fixed;
    z-index:600;
    overflow-x: auto; /* Added this */
}

我做了一个演示在这里。但是，像其他人所说的，你真的应该考虑响应布局，使你的页面更加人性化