html - 隐藏透明标题下的滚动内容

Question

好吧，我已经发疯了，寻找答案。这很简单，我知道。

我的页面顶部有一个固定的透明标题。当我滚动时，我希望正文内容在它下方滚动，但不能通过标题 div 看到。我看过类似的帖子，但对我的情况没有任何帮助。欣赏任何可以提供帮助的提示或线索。谢谢！

下面的示例：thnki.com/hosting/sycamore

Answer 1

您将需要：

• 制作一个看起来和现在一样的非透明图像，
• 为页面的下部（直接在标题下方/之后）创建一个具有自己溢出样式设置的 div，这将导致滚动条只是页面的一部分
• 或者只是享受你得到的超棒的透明叠加效果。

我喜欢它实际上的样子

Answer 2

我已经阅读了许多相关示例来隐藏顶部栏下的主体文本。但是，我无法在我的情况下使用它。我找到了一个在线简单的工作示例。你可能想看看：

http://www.pmob.co.uk/temp/fixed-header-footer-left-new.htm

我的相关 CSS 配置是： * 你可能注意到我已经声明了 top/bottom/left/right/height 以及 position 为 relative，我设置了 background，overflow 为 auto，我也设置了 z-index。

我认为所有这些组合导致在顶部栏/顶部菜单下滚动时能够隐藏文本内容。

.topnavigation {  
    background-position:fixed;
    background-color:   lightgray;
    width:              100%;
    overflow:           auto;
    z-index:            10;

}
    .main_body {
        background:     white;
        position:       relative;
        left:           200px;
        top:            30px;
        bottom:         0;
        right:          0;
        white-space:    wrap; 
        width:          660px; 
        overflow:       auto;
        border:         0px;
        z-index:        1;


    }