使用水平滚动将标题固定到页面顶部 [英] Fix header to top of page with horizontal scroll

问题描述

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

I have a navigation header at the top of every page. I'd like the user to be able to scroll the horizontal overflow with a scrollbar. I understand this isn't possible with just CSS, but can any help me with the JavaScript portion?

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

If this is too general, I'll post my project's code, but it's pretty extensive.

例如：

示例头|关于|联系我们| B1 | （剪切）

| Example Header | About | Contact | Bl | (Cut off)

< ------------------>（滚动条）

<------------------> (Scroll bar)

推荐答案

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

You can use a version of my code:

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。

Replace 'header' with your header's id.

希望这有助于！

这篇关于使用水平滚动将标题固定到页面顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！