使用水平滚动将标题固定到页面顶部答案

【问题标题】：Fix header to top of page with horizontal scroll使用水平滚动将标题固定到页面顶部
【发布时间】：2012-08-30 18:01:00
【问题描述】：

我在每个页面的顶部都有一个导航标题。我希望用户能够使用滚动条滚动水平溢出。我知道仅使用 CSS 是不可能的，但有任何人可以帮助我处理 JavaScript 部分吗？

如果这太笼统，我会发布我的项目代码，但它相当广泛。

例如：

|示例标题 |关于 |联系方式 |提单 | （切断）

（滚动条）

【问题讨论】：

标签： javascript html css header horizontal-scrolling

【解决方案1】：

您可以使用我的代码的一个版本：

function reposition(){
    var el = document.getElementById('header');
    var ScrollLeft = document.body.scrollLeft;
    if (ScrollLeft == 0)
    {
        if (window.pageXOffset)
            ScrollLeft = window.pageXOffset;
        else
            ScrollLeft = (document.body.parentElement) ? document.body.parentElement.scrollLeft : 0;
    }
    el.style.left = "-" + ScrollLeft + "px";
}

将 'header' 替换为您的标头 ID。

希望这会有所帮助！

【讨论】：

非常感谢！ window.pageXOffset 在浏览器中是否存在兼容性问题？
window.pageXOffset 仅适用于 Firefox/NS6+/Chrome。 document.body.scrollLeft 用于 IE

【解决方案2】：

使用 CSS 是可能的。将您的标头设置为使用overflow: auto;。

示例：http://jsbin.com/edopor/4/edit

【讨论】：

感谢您的提示。对不起，我没有说清楚。我希望标题与主滚动条交互。