0

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

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

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

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

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

4

2 回答 2

0

简短的回答：没有。

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

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

于 2013-11-05T10:55:36.690 回答
0

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

<!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>
于 2013-11-05T12:33:35.560 回答