jquery - 位置 :fixed overflowing parent

Question

如有任何帮助，我们将不胜感激。

下面是一个简化的代码片段。我遇到的问题是“ Logo ”类的位置完全符合我的要求，即相对于整个页面/窗口。因此，当我向下滚动页面时，“ Logo ”元素会在父元素内向下移动页面。

问题在于，尽管“logo”元素是“page”元素的子元素，但“logo”始终可见，即使在父元素的边界之外，尽管将父元素的“溢出”设置为“隐藏” .

如果有人知道如何用 CSS 解决这个问题，那将是非常棒的和首选的。 jQuery (JavaScript) 也是一个选项，但如果可以的话，我宁愿避开它，因为我非常清楚，一旦完成，该网站将大量使用 JavaScript。

<style>
.page{
    width:100%;
    height:1000px;
    overflow:hidden;
}
.logo{
    position:fixed;
    margin:20px;
}
</style>

<div class="page">
    <div class="logo"></div>
<div>
<div class="page">
    <div class="logo"></div>
<div>

Answer 1

无法完成。取自here :

因为固定位置元素相对于视口(viewport)是固定的，而不是另一个元素。因此，由于视口(viewport)没有将其切断，溢出变得无关紧要。

根据要求，完全理论上可能的 jQuery 解决方案:

$(window).scroll(function(){
    if($(this).scrollTop()>=1000){
        $('#ItemToHide').hide();
    } else {
        $('#ItemToHide').show();
    }
});

这太马虎了，显然可以改进，但这样的事情可能会奏效。