我试图隐藏侧边栏上的溢出，以便在页面滚动时能够产生很好的视觉效果。揭示了下面的侧边栏（这将是相同的，但具有不同的字体颜色，图像等）。
在Safari＆amp; Chrome但不在Firefox或Opera中...顶部侧边栏不会隐藏并位于下面的侧边栏内容之上。
我对此进行了广泛的研究，但答案与我想要达到的目标无关。似乎问题可能是由于溢出：隐藏不能很好地与位置：固定。
我错过了一些非常明显的事情，是否有解决方法？
以下代码：
div#latest {
background: #1a1a19;
position: relative;
top: 0;
left: 0;
width: 100%;
overflow: hidden!important;
;
z-index: 2
}
div#latest div#latestslides {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%
}
div#latest div#latestslides div.slide {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
position: relative;
opacity: 1;
}
/* sidebar */
div.sidebar {
width: 350px;
height: 100%;
position: fixed;
left: 0;
top: 0;
overflow: hidden!important;
z-index: 1;
}
.content {
background-color: #FC0;
}<body>
<!-- Main -->
<div id="main">
<!-- Start latest -->
<div id="latest">
<div class="sidebar">
<div class="nav" id="">
<div class="sections" style="color:pink">
<p>THE CONTENT ABOVE</p>
<p>THE CONTENT ABOVE</p>
<p>THE CONTENT ABOVE</p>
<p>THE CONTENT ABOVE</p>
<p>THE CONTENT ABOVE</p>
<p>THE CONTENT ABOVE</p>
</div>
</div>
</div>
<div id="latestslides" style="background-color:black">
<div class="slide" style="background-image:url(images/banner.jpg);"></div>
<div class="slide" style="background-image:url(images/banner.jpg);"></div>
</div>
</div>
<!-- End latest -->
<!-- Start B Sidebar -->
<div class="sidebar">
<div class="nav" id="">
<div class="sections" style="color:orange">
<p>THE CONTENT BELOW</p>
<p>THE CONTENT BELOW</p>
<p>THE CONTENT BELOW</p>
<p>THE CONTENT BELOW</p>
<p>THE CONTENT BELOW</p>
<p>THE CONTENT BELOW</p>
</div>
</div>
</div>
<!-- End B sidebar -->
<!-- Portfolio-->
<section id="portfolio" style="margin-left:350px;">
<div class="container">
<header>
<h2>content</h2>
</header>
<p style="font-size:28px; line-height:30px;">Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis fusce hendrerit
lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis
fusce hendrerit lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc
nibh morbi quis fusce hendrerit lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam
vivamus eget. Nunc nibh morbi quis fusce hendrerit lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum
fermentum etiam vivamus eget. Nunc nibh morbi quis fusce hendrerit lacus ridiculus.
</p>
</div>
</section>
</div><!-- End Main -->
</body>
Safari - the sidebar containing 'content above' is hidden on scroll showing the content below
答案 0 :(得分：0)
您的侧边栏有一个固定的位置，可以将其从文档流中取出。它本质上不再是具有隐藏溢出的元素的子元素。显然，浏览器以不同方式处理此问题
您需要使用不同的结构来限制可见内容，无论是固定元素还是嵌套在固定侧边栏内的元素。您似乎在复制内容，因此不管怎样，不同的方法可能会更好。查看＆＃34;粘性侧边栏＆＃34;为了想法。
答案 1 :(得分：0)
这是我在你的精彩网站上找到的解决方案，它使用剪辑并适用于所有主流浏览器，甚至IE8！ http://jsfiddle.net/lmeurs/jf3t0fmf/
注意：在移动设备上，顶部元素仅在滚动释放时隐藏。
body {
font: 14px arial;
}
.parent-container {
position: relative;
width: 300px;
height: 200px;
}
.parent {
position: absolute;
width: 300px;
height: 200px;
background-color: yellow;
clip: rect(0, auto, auto, 0);
}
.child {
position: fixed;
top: 50px;
left: 50px;
padding: 1em;
background-color: red;
}
.child.pink {
background-color: pink;
}<div class="child pink">Fixed positioned element</div>
<div class="parent-container">
<div class="parent">
<div class="child red">Fixed positioned element</div>
</div>
</div>
<h1>Workaround to clip fixed positioned element to parent</h1>
<p>For more details see <a href="http://stackoverflow.com/a/23859719/328272">our answer</a> at StackOverflow's question "<a href="http://stackoverflow.com/a/23859719">parent & child with position fixed, parent overflow:hidden bug</a>".</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>
<p>Dummy text to cause scrollbars</p>