Question

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

仅使用CSS，position：fixed将不会与页面的其余部分一起滚动。所以有两种方法

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

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

所以这些是我实现过的两种方式，我希望你们有没有其他可以在小屏幕桌面和手机上运行的选项很抱歉没有代码要强调，因为它会占用太多空间。

Answer 1

简答：不。

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

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

Answer 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>

固定顶部栏，与页面的其余部分水平滚动

2 个答案: