Demo

Question

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 我能够访问所有菜单

需要：

我需要的是以下

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

Answer 1

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

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

Demo

在这里，我在文档的滚动上轻推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; }

{{1}}

Demo 2

Demo 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 */
}

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

Answer 3

我刚刚向你添加了溢出滚动，它对我有用。

overflow:scroll;

fiddle here

在水平滚动上显示固定宽度顶部栏

Demo

Full Page Result

3 个答案: