在滚动页面时隐藏透明固定位置后面的可滚动内容？ [英] Hide scrollable content behind transparent fixed position divs when scrolling the page?

问题描述

我有一个div称为标题设置与固定的位置。问题是当我滚动页面的页面的内容显示在标题后面（标题是透明的）。

我知道很多关于css，来形容这一个。我已经尝试设置溢出隐藏，但我知道它不会工作（和没有）。

这是很难解释，所以我做了最好我可以。

html：

 < div id = header> 
< div id =topmenu>首页|查找Feeds |订阅< / div> 
< / div> 
< div id =container> 
< div id =content> 
 testing 
< / div> 
< / div> 
  

css：

 code> #header {margin：0 auto; position：fixed; width：100％; z-index：1000;} 
 #topmenu {background-color：＃0000FF; height：24px; filter：alpha （opacity = 50）; opacity：0.5;} 
 #leftlinks {padding：4px; padding-left：10px; float：left;} 
 #rightlinks {padding：4px; padding-right：10px; float：right;} 
 #containerfixedtop {width：100％; height：20px;} 
 #contentfixedtop {margin：0 auto; background-color：＃DAA520; width：960px; height：20px;} 
 / * -------------------------------------------- -------------------------------------------------- ------------------------------------------------- * / 
 
 / * container / content ------------------------------------ -------------------------------------------------- --------------------------------------- * / 
 #container {position： relative; top：68px; width：100％; height：2000px; overflow：auto;} 
 #content {margin：0 auto; background-color：＃DAA520; width：960px; height：2000px;} 
  

这是问题的截图：

img src =https://i.stack.imgur.com/aEF5L.jpgalt =enter image description here>

解决方案

您的CSS代码：

$

b
$ b

  .wrapper {
 width：100％; 
 position：fixed; 
 z-index：10; 
 background：inherit; 
} 
 
 .bottom-wrapper {
 width：100％; 
 padding-top：92px; 
 z-index：5; 
 overflow：auto; 
} 
  

您的HTML：

 < div class =wrapper> 
 ...您的标题在这里... 
< / div> 
< div class =bottom-wrapper> 
 ...您的主要内容在这里... 
< / div> 
  

这将为您提供与您的网站完全匹配的标题，并悬浮在顶部。主内容将滚动标题，并在它通过标题时消失。
您的.bottom-wrapper padding-top应该是标题封装容器的内容的高度。

干杯！

I have a div called header that is set up with a fixed position. The problem is when I scroll the page the content of the page shows up behind the header (the header is transparent).

I know a lot about css, but cannot seem to figure this one out. I have tried setting overflow to hidden, but I knew it wouldn't work (and it didn't).

This is very hard to explain, so I did the best I could.

html:

<div id="header">
        <div id="topmenu">Home | Find Feeds | Subscriptions</div>
    </div>
    <div id="container">
        <div id="content">
            testing
        </div>
    </div>

css:

#header     {margin:0 auto;position:fixed;width:100%;z-index:1000;}
#topmenu    {background-color:#0000FF;height:24px;filter: alpha(opacity=50);opacity: 0.5;}
#leftlinks  {padding:4px;padding-left:10px;float:left;}
#rightlinks {padding:4px;padding-right:10px;float:right;}
#containerfixedtop {width:100%;height:20px;}
#contentfixedtop {margin:0 auto;background-color:#DAA520;width:960px;height:20px;}
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

/* container/content ----------------------------------------------------------------------------------------------------------------------------- */
#container  {position:relative;top:68px;width:100%;height:2000px;overflow:auto;}
#content    {margin:0 auto;background-color:#DAA520;width:960px;height:2000px;}

Here's a screenshot of the problem:

解决方案

Just coming to this late, but in case anyone else runs across this in the future, here's your fix.

Your CSS Code:

.wrapper {
    width:100%;
    position:fixed;
    z-index:10;
    background:inherit;
}

.bottom-wrapper {
    width:100%;
    padding-top:92px;
    z-index:5;
    overflow:auto;
}

Your HTML:

<div class="wrapper">
    ...your header here...
</div>
<div class="bottom-wrapper">
    ...your main content here...
</div>

This will provide you with a header that cleanly matches your site, and floats at the top. The main content will scroll free of the header, and disappear when it passes the header. Your .bottom-wrapper padding-top should be the height of your header wrapper's content.

Cheers!

这篇关于在滚动页面时隐藏透明固定位置后面的可滚动内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！