修复了与页面其余部分水平滚动的顶部栏答案

【问题标题】：Fixed top bar that scrolls horizontally with the rest of the page修复了与页面其余部分水平滚动的顶部栏
【发布时间】：2013-11-05 10:39:34
【问题描述】：

我想实现一个固定的顶栏，但同时它需要与页面的其余部分水平滚动；它不是响应式网站

单独使用 CSS 时， position: fixed 不会随着页面的其余部分滚动。所以有两种方法

1) 不要使用固定位置，而是将容器留在文档流中，而是使用 javascript 将其垂直定位在窗口顶部。这样做的问题是脚本在浏览器上的速度不够快，并且每次垂直滚动时，在顶部栏移动以覆盖它之前，内容都会瞬间闪烁。

2) 保持位置固定，并使用 javascript 根据用户所在的左/右滚动量水平定位它。这样做的问题是手机有滚动动画（一种加速动画），脚本只在动画停止后运行，这也很尴尬。

所以这是我看到的两种实现方式，我希望你们有任何其他选项可以在小屏幕台式机和手机上很好地工作抱歉，没有代码要突出显示，因为它会占用太多空间。

【问题讨论】：

如果您可以发布指向您页面的链接，我可以提出一些建议。

标签： javascript jquery css

【解决方案1】：

简短回答：不。

长答案：使用“固定”定位的问题在于它会使元素失去流动性。因此它不能相对于其父级重新定位，因为它好像没有一个。

你需要使用 JS。我认为您提供的解决方案是唯一的。

【讨论】：

【解决方案2】：

如果我理解正确，看起来你想要这样的东西，垂直滚动条在最右边，但你什么也没说。

<!DOCTYPE html>
<html>
    <head>
        <title>scroll</title>
        <style type="text/css">
            #topbar
            {
                position: absolute;
                width: 2000px;
                height: 40px;
                top: 0;
                left: 0;
                border: 1px dashed red;
            }

            #content
            {
                position: absolute;
                width: 2000px;
                left: 0;
                top: 41px;
                bottom: 0;
                border: 1px dotted blue;
                overflow-y: scroll;
            }
        </style>
    </head>
    <body>
        <div id="topbar">
            Hello topbar
        </div>
        <div id="content">
            <script type="text/javascript">
                (function(){
                    var n = 1000;
                    do
                    {
                        document.write("<p>some content</p>");
                    } while ( --n );
                })();
            </script>
        </div>
    </body>
</html>

【讨论】：