【问题标题】：Show fixed width top bar on horizontal scroll在水平滚动条上显示固定宽度的顶栏
【发布时间】：2014-02-28 00:48:29
【问题描述】：

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>

小提琴

Demo

Full Page Result

问题

正如您在 Demo 中看到的那样，我无法访问所有菜单，但如果它是像 Full Page Result 这样的整页菜单，我'能够访问所有菜单的

需要：

我需要的是以下内容

标题应固定在顶部
即使我更改了浏览器的宽度，我也需要水平滚动并访问所有菜单

【问题讨论】：

如果标题太宽，您确定要让用户滚动吗？您可能应该使用响应式 CSS 以获得更友好的体验。
我需要通过滚动访问其他链接
尝试添加溢出：自动；在标题 div 中。

标签： html css layout

【解决方案1】：

嗯，这对于纯 CSS 是不可能的，因为这就是 position: fixed; 的行为方式，如果你想要一个 jQuery 解决方案，它知道你没有标记，但你没有任何其他方式。 . (或者使用JS)

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

Demo

在这里，我轻推文档的top 属性滚动，因此您的元素保持position: absolute;，但它的行为就好像它是fixed。

只要确保你从#headers 中删除position: fixed;，你现在就不需要了，而且header 背景会因为它超出视口而被切断，所以分配一些height 给你的@ 987654333@ 元素并同时分配background-color

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

Demo 2

Demo 2（整页，使用内滚动条，而不是外滚动条）

【讨论】：

【解决方案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 */
}

我做了一个演示 here。但是就像其他人所说的那样，您应该真正研究响应式布局，以使您的页面更加用户友好

【讨论】：

【解决方案3】：

我刚刚在你的页面上添加了溢出滚动，它对我有用。

overflow:scroll;

fiddle here

【讨论】：