如何制作滚动时不移动的固定标题？答案

【问题标题】：How to make a fixed header which is not moving when scrolling?如何制作滚动时不移动的固定标题？
【发布时间】：2021-04-05 17:14:03
【问题描述】：

我已经尝试了类似线程中的几乎所有答案，但可以找到适合我的任何答案。

我有以下网站：

一个标题（div 跨越整个宽度）。
左列。
右栏。

标题和右列是固定的。

我希望左栏中的文本在滚动时消失在标题下方。

就像我在许多网站上看到的那样，带有消息的标题（例如“接受 cookie”）停留在固定位置。

有什么想法吗？

【问题讨论】：

标签： scroll header

【解决方案1】：

HTML：


    <div id="head">
    <!-- here is the code of our header -->
    </div>
    <div id="content">
    <!-- The next block for example with the main content -->
    </div>

CSS：


    #head{
        width: 1000px;
        height: 60px;
        position: fixed;
        background: #fff;
        z-index: 1000;
    }
    /* So that our next block does not run under the header, as soon as the page is loaded, add an indent. */
    #content {
        margin-top: 60px;
    }

【讨论】：

这不起作用。包括标题在内的所有内容都在滚动。
如果我添加“溢出：隐藏；”有用。代码如下所示： .header{ overflow: hidden;背景颜色：黑色；位置：固定；顶部：0；宽度：100%； z 指数：1000；但我也想修复正确的列。右栏不应滚动。

【解决方案2】：

现在一切正常。

带有固定标题的左栏滚动：

.header {
   overflow: hidden;
   background-color: black;
   position: fixed;
   top: 0;
   width: 100%;
}

右栏固定（响应式）：

@media (min-width: 1200px) {
    .rightcolumn {position: fixed;}
}

【讨论】：