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

我尝试过几乎所有类似的答案，但都能找到适合我的答案

我有以下网站：

标题（整个宽度上的div跨度）

左列

右栏

标题和右侧列是固定的

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

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

有什么想法吗？

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>

    #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;
   background-color: black;
   position: fixed;
   top: 0;
   width: 100%;
}

右立柱固定（响应）：

---

这是行不通的。所有的东西，包括标题都在滚动。如果我添加“溢出：隐藏”，它会工作。代码如下所示：。标题{溢出：隐藏；背景颜色：黑色；位置：固定；顶部：0；宽度：100%；z-index:1000；}但我也希望有正确的列固定。右列不应滚动。

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