職位：固定溢出父母

下面是一個簡化的代碼片段。我遇到的問題是「logo」類完全按照我希望的那樣定位，即相對於整個頁面/窗口。所以當我向下滾動頁面時，「logo」元素在父元素內向下移動頁面。

問題是，儘管事實上「logo」元素是「page」元素的子元素，即使在父元素邊界之外，「logo」仍然始終可見，儘管設置父元素「overflow」爲「hidden 」。

如果有人知道如何用CSS來糾正這個問題，那將是非常棒的和首選的。 jQuery（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>

來源

2013-01-17 Adam

固定是基於窗口。它與父母/孩子無關。 – Leeish

您可能想要絕對定位。絕對定位元素基於其父元素。因此，徽標絕對位置與頂部：20px將放置它從頁面元素的頂部20像素。使用20px的頂部固定將其從窗口頂部放置20px。然而爲了使絕對定位起作用，你的頁面元素至少需要一個相對位置。

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

來源

2013-01-17 15:48:56 Leeish

我再次閱讀這篇文章的道歉這不是很清楚，但我不希望相對於我需要的父元素定位的標識被固定到窗口。 – Adam

然後下面的答案是正確的。固定位置元素不考慮父母。一個jQuery解決方案，也許下面的解決方案可能工作。 – Leeish

無法完成。取自here：

由於固定位置元素相對於視口是固定的，而不是另一個元素。因此，由於視口不切斷，溢出變得無關緊要。

按照要求，完全可能的理論jQuery的解決方案：

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

這是超級馬虎，明明可以得到改善，但這樣的事情可能會奏效。

來源

2013-01-17 15:50:03 PlantTheIdea

雖然它被正確定位，但它是一種遺憾，它並沒有考慮到它的父母溢出CSS，非常感謝。不要以爲你知道一個jQuery方法會使它工作？ – Adam

唯一想到的就是使用scrollTop來確定你到底有多遠，綁定到.scroll（）事件。當窗口的頂部到達特定點時，隱藏該元素。 – PlantTheIdea

職位：固定溢出父母

回答

相關問題