讓div粘到另一個絕對定位的頂部滾動div

這裏是東西，有一個div .page它絕對定位在tha頁面。裏面有一個.container div，容器內有.content。讓div粘到另一個絕對定位的頂部滾動div

.page有一定的高度，所以內容會滾動到.page的內部。在這種情況下，我想要一個.stuck div粘到.page的頂部。（我相信我做上面的語法錯誤！）

反正fiddel：

更新：我希望.stuck在的.page頂部上固定不考慮滾動.page。

這是佈局：

<div class="page"> 
    <div class="container"> 
     <div class="content"></div> 
     <div class="stuck"></div> 
    </div> 
</div>

和我（不工作）CSS：

.page{ 
    position: absolute; 
    top:50px; 
    left:200px; 
    width:200px; 
    height:300px; 
    overflow:auto; 
} 
.container{ 
    position:relative; 
} 
.stuck{ 
    position: absolute; 
    top:0; 
    right:0; 
    left:0; 
    height:50px; 
    background:blue; 
} 
.content{ 
    height:700px; 
    background:gray; 
}

我想藍色.stuck DIV 總是存在在.page div的頂部。任何幫助？

更新： 注：一個快速的把戲可能使.stuck是positions:fixed和.page的相同位置和寬度，但是這不是我的answere自.page的座標可能與JS隨時更改。

來源

2013-11-02 Alireza

你的意思是你想要的.stuck將出現（觀衆）在頁面的頂部，而不管.page上的滾動？ – TreeTree

@TreeTree：就像你說的那樣完全一樣！ – Alireza

我不認爲有可能將一個元素的位置固定到除了沒有javascript/jquery的屏幕上。 – TreeTree

您可以將.page和.stuck添加到共同的父元素並將其疊加在另一個元素上。

http://jsfiddle.net/YBAvb/1/

.page_holder{ 
 
     position: absolute; 
 
     top:50px; 
 
     left:200px; 
 
     width:200px; 
 
     height:300px; 
 
    } 
 
    .page { 
 
     position: absolute; 
 
     top:0; 
 
     left:0; 
 
     width:200px; 
 
     height:300px; 
 
     overflow:auto; 
 
     z-index: 1; 
 
    } 
 
    .container { 
 
     position:relative; 
 
    } 
 
    .stuck { 
 
     position: absolute; 
 
     top:0; 
 
     right:0; 
 
     left:0; 
 
     height:50px; 
 
     background:blue; 
 
     margin-right: 18px; 
 
     z-index: 2; 
 
    }

<div class="page_holder"> 
 
     <div class="stuck"></div> 
 
     <div class="page"> 
 
      <div class="container"> 
 
       <div class="content"></div> 
 
      </div> 
 
     </div> 
 
    </div>

來源

2013-11-02 16:08:06

好的解決方案，但問題出現在容器內的'.stuck'。我不能在真實情況下展示它。其實它會像導航一樣。它處於內容的中間，但它一直滾動到頂部。 – Alireza

以來。第座標可能與JS隨時更改。

...所以你已經使用JS！ :)

使用這個確切的HTML標記是不可能
對於這樣的情況下，我們總是有Javascript和jQuery的：JSBIN DEMO

$('.stuck').each(function(){ 

    var $that = $(this), 
     $page = $that.closest('.page'); 

    $page.scroll(function(){  
    $that.css({top: this.scrollTop}); 
    }); 

});

來源

2013-11-02 16:13:06

似乎是這樣，它可以用JS完成。那微笑告訴很多！ – Alireza

讓div粘到另一個絕對定位的頂部滾動div

回答

相關問題