固定在容器元素中的位置而不是瀏覽器/視口

我需要在包含的父級中定位一個頭部，以便在滾動時跟隨它。問題是，固定在容器元素中的位置而不是瀏覽器/視口

position:fixed

修復的位置到瀏覽器，而不是父母。這是因爲當我有一個容器有一個水平滾動的寬度溢出（內容比容器寬），我的固定頭沒有溢出滾動作爲表的內容。

看到這個fiddle demo

所以這裏的目的是修復頭的位置，但是相對於它固定的父容器。在這個小提琴，你可以看到，我已經註釋掉CSS塊：

.container{ 

    /*-webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    transform: translateZ(0);*/ 

    -webkit-transform: none; 
    -moz-transform: none; 
    -ms-transform: none; 
    transform: none; 
}

如果更換當前的CSS塊（帶轉換設置爲none）與一個與translateZ，頭會得到定位的在它的父容器中，但不再是固定的。

任何人都知道如何解決這個問題？首選的解決方案將只是CSS/HTML並避免JS，但如果沒有別的，那麼JS當然是我需要去的！

來源

2015-07-21 Jonathan Lind

要修正相對於ists父項的內容，您需要位置：相對於父項和'位置：絕對值'在子項上 – atmd

CSS本身無法做到這一點。

Position: fixed與視口有關，不是它包含元素。

我見過an attempt to solve this problem使用CSS3 transform財產，但（正如你在我的第一個答案你的評論中指出的）它似乎並沒有工作。

我知道你不能使用任何客戶端庫，但這是我所知道的唯一解決方案。對於你和其他可能有一天需要的人來說，這裏有一個可行的解決方案。它採用了一點jQuery：

將元素放置在另一個元素中，使定位元素沿x和y軸固定（即位置水平和垂直固定）。

http://jsfiddle.net/8086p69z/8/

HTML

<div class="moving-article"> 

    <div class="container"> 

    <header class="fixed-header">FIXED HEADER</header> 

     <ul> 
     <li>SCROLL</li> 
     <li>SCROLL</li> 
     <li>SCROLL</li> 
     </ul>  

    </div> 

</div>

CSS（相關部分）

.moving-article { 
    height: 150px; 
    width: 75%; 
    overflow-x: scroll;  
} 

.fixed-header { 
    background: rgba(0,0,0,0.5); 
    width: 50%; 
    text-align: center; 
    line-height: 40px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.container{ 
    width: 1000px; 
}

jQuery的

var leftOffset = parseInt($(".fixed-header").css('left')); 
$(window).scroll(function(){ 
    $('.fixed-header').css({ 
     'left': $(this).scrollLeft() + leftOffset 
    }); 
});

來源

2015-07-21 18:12:24

再次感謝@mbnyc，我可能不得不重新考慮我的選項。然而，這在某些情況下似乎有效，如果標題和內容都有水平溢出，則不起作用。我需要將頭部的溢出隱藏在容器中，就像它的內容一樣。 –

根據你的評論，我不完全確定什麼不起作用。我用內容填充了小提琴演示標籤，滾動和定位機制正常工作。請詳細說明。或者可能在演示中複製問題併發布更新後的鏈接。 –

假設容器類寬度爲1000px，並且水平方向有溢出滾動。然後，標題應該一樣寬，並使用與容器中的內容相同的水平滾動。如果將標題的寬度設置爲100％，那麼標題將與容器重疊並填充整個屏幕。這是一個小例子：http://jsfiddle.net/8086p69z/12/。現在需要說明的是，標題需要在容器「內部」以及其他內容中。因此，當您水平滾動查看內容時，標題如下。 –

將標題的位置設置爲'絕對'，並且它的父容器（您希望它與之相對）爲'相對'，並將其設置爲使用'top：0'將其設置爲堅持父項的頂部

CSS：

.container { 
    position: relative; 
} 

.child { 
    position: absolute; 
    top: 0; 
}

來源

2015-07-21 10:10:20

這會產生與使用變換時相同的結果嗎？標題不在滾動中。 http://jsfiddle.net/8086p69z/3/ –

也許我誤解了，你能解釋一下你到底想達到什麼目的嗎？ –

當窗口向下滾動時，我需要頭部跟隨包含的父級。當我的標題的內容比容器寬時，它應該給我一個水平滾動（如在演示中），但它仍然應該遵循向下滾動 –

爲了保持固定父內的元素不能與position: fixed完成，因爲position: fixed需要的元素out of the flow，因此它沒有父。它相對於視口定位。

爲了實現您的目標，在保持簡單而高效的同時，您可能需要考慮Tether，「客戶端庫使絕對定位的元素高效地附着到頁面中的元素上」。

希望這會有所幫助。祝你好運。

來源

2015-07-21 11:43:14

謝謝@mbnyc，但我不能使用客戶端庫。沒有其他建議？ –

也許你可以用CSS3的'transform'屬性來完成它。 http://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container –

也無法讓它工作。雖然它正確地固定在容器上，但它在滾動時並不固定在它的頂部。 http://jsfiddle.net/8086p69z/5/ –

固定在容器元素中的位置而不是瀏覽器/視口

回答

相關問題