css - 透明静态标题不希望滚动时在标题下显示文本

Question

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

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

Answer 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