透明静态头文件希望不会在滚动时在头文件下面显示文本

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

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

来源

2012-03-13 user1266860

我猜[这里]（http://portaponte.com/?page_id = 300）的问题，对吧？我真的没有得到你想要达到的目标。如果文本消失在标题之前，而不是在它之下会好吗？ – scumah 2012-03-13 17:15:52

是的，如果文本在标题之前消失，那将会非常好。感谢您试图帮助。 – user1266860 2012-03-13 17:25:08

好，虽然并不完美，我会回答去：

这种解决方案的问题是，滚动仅徘徊在滚动的内容时会工作，这意味着您将无法如果鼠标位于大文本容器之外，则进行滚动。话虽这么说，这就是我想你可以这样做：

首先，包裹#casing格在#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}); 
}

就是这样。为此，我们创建了一个新图层，其中包含窗口高度减去90px的可滚动内容。这些90px来自您的标题的高度加上它的顶部边距。由于包装有position: fixed，它不会在滚动上移动，但它的内容会。最重要的是，使用overflow-y: hidden;属性，我们会剪切任何溢出的内容，导致文本在您的标题下不可见。

总之，在我看来，让信件的结果标题下走的是冷静的，我不会改变它：P

来源

2012-03-13 17:47:00 scumah

非常感谢，我会试试看，看看它是怎么回事！在我看来，文本是好的，当走到标题下时，我可能会说出一些感觉，觉得它是必须隐藏的:)再次感谢！ – user1266860 2012-03-13 18:43:35

透明静态头文件希望不会在滚动时在头文件下面显示文本

回答

相关问题