透明的静态标题不希望在滚动时在标题下显示文本答案

【问题标题】：transparent static header would like to not end up with text showing under the header when scrolling透明的静态标题不希望在滚动时在标题下显示文本
【发布时间】：2023-04-01 02:34:01
【问题描述】：

我是 css 的初学者，我试图查看是否可以找到解决我的问题的解决方案，即在需要滚动时让我的内容不显示在我的透明标题下。我已经检查了以下帖子，但我无法完成这项工作。如果可能的话，如果我能得到一些指导，我会非常高兴。如果有任何帮助，我附上了我的问题的视觉效果。 www 是 www.portaponte.com 在此先感谢！

Hide scrollable content behind transparent fixed position divs when scrolling the page?

【问题讨论】：

我猜是here's 的问题，对吧？我真的没有得到你想要达到的目标。如果文本在标题之前消失而不是在它下面会很好吗？
是的，如果文本在标题之前消失，那就太好了。感谢您提供帮助。

标签： css

【解决方案1】：

好吧，虽然不完美，但我会回答：

此解决方案的问题在于，只有在悬停可滚动内容时才能滚动，这意味着如果您的鼠标位于大文本容器之外，您将无法滚动。话虽如此，这就是我认为你可以做的：

首先，将#casing div 包装在#casing-wrapper div 中，得到如下内容：

<div id="casing-wrapper">
  <div id="casing">
    lots of content here...
  </div>
</div>

然后你需要用这种方式设置这个新的 div：

#casing-wrapper {
  width: 800px;
  position: fixed;
  left: 50%;
  margin-left: -400px;
  top: 90px;
  overflow-y: scroll;
}

您还需要添加一些 jQuery 来根据窗口的高度设置 #casing-wrapper 的高度：

jQuery(document).ready(function(){
  setWrapperHeight();
  jQuery(window).resize(function(){
    setWrapperHeight();
  });
});

function setWrapperHeight() {
  var height = jQuery(window).height();
  var margin = 90;
  jQuery("#casing-wrapper").css({"height":height - margin});
}

仅此而已。为此，我们创建了一个包含可滚动内容的新层，该层的窗口高度为负 90 像素。那些 90px 来自你的标题的高度加上它的上边距。由于包装器有position: fixed，它不会在滚动时移动，但它的内容会。最重要的是，使用overflow-y: hidden; 属性，我们可以剪裁任何溢出的内容，导致文本在您的标题下不可见。

无论如何，在我看来，让字母放在标题下的结果很酷，我不会改变它：P

【讨论】：

非常感谢，我会试试看效果如何！在我看来，文本在标题下是可以的，我可能会向那些认为必须隐藏它的人谈谈一些道理：）再次感谢！