0

任何帮助将非常感激。

下面是一个简化的代码片段。我遇到的问题是“徽标”类的位置完全符合我的要求，即相对于整个页面/窗口。因此，当我向下滚动页面时，“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>
4

2 回答 2

2

无法完成。取自这里：

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

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

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

这是超级草率，显然可以改进，但这样的事情可能会奏效。

于 2013-01-17T15:50:03.660 回答
1

您可能想要绝对定位。绝对定位元素基于其父元素。因此，带有 top: 20px 的徽标绝对位置会将其放置在距页面元素顶部 20 像素处。固定为 20px 的顶部，使其距窗口顶部 20px。但是，要使绝对定位起作用，您的页面元素至少需要一个相对位置。

http://www.w3schools.com/css/css_positioning.asp

于 2013-01-17T15:48:56.823 回答