如果固定元素超出父元素的高度，该如何隐藏？

Question

我想知道如何隐藏.fixedElement .entry-content的.header(blue section) ，一旦.fixedElement到达顶部/底部，就不允许它显示在.header(blue section)或.footer(green section)上它是父元素，因此将其隐藏。

http://jsfiddle.net/cafgnzj3/

我了解到固定元素在其父元素css样式内不起作用，因为它基于浏览器的视口。

我认为创建一个示例会容易得多。

如果可能的话，我也会尽可能地使用javascript。

Answer 1

父级CSS： {overflow:hidden;}

编辑：专门：

<div class='some-tough-edges'>buncho stuffs</div>

.some-tough-edges { width: yourchoice; height: yourchoice; overflow: hidden; //display: block; if not using a block element }

edit2：不要在溢出内使用固定，在容器上固定位置以及容器内绝对或相对

Answer 2

可能最简单的方法是使.the_content成为绝对元素，然后使用z-index像这样：

.fixedElement { position: fixed; z-index: 1; }
.the_content { position: absolute; z-index: 2; }

如果.the_content是动态的，请在Javascript中调整其高度和位置。

在Javascript中调整高度和位置比在其中实现这种效果要容易得多。