如何使一個元素固定但相對於它的父級滾動？

我有.container div有一些內容和一個隱藏的標題，這個元素也有overflow-Y: auto;屬性。當用戶在.container左右滾動到100px左右時，我想使標題固定。如何使一個元素固定但相對於它的父級滾動？

這裏是我的代碼：

.container {position: relative; border: 1px solid #ccc; overflow-y: auto; height: 200px; margin-top: 50px; width: 500px;} 
 
.to-be-fixed {position: absolute; top: 0px; left: 0px; height: 30px; text-align: center; font-family: Arial; padding: 0px 12px; background: red; width: 100%; line-height: 30px; margin-top: -30px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
\t <div class="to-be-fixed"> 
 
\t \t Header to be fixed 
 
\t </div> 
 
\t <div class="content-holder"> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t \t <p>content here..!</p> 
 
\t </div> 
 
</div>

當我不使用頭margin-top: -30px;它正在顯示...！像這樣的圖片：

我想它應該是隻顯示當用戶向下滾動，以查看container元素這樣的形象更多的內容：

我也用了一些jQuery使其固定，但它不工作：

$(document).ready(function(){ 
var headerFixed = $('.to-be-fixed'); 
var headerFixedHolder = $('.container'); 
var heightScrolled = headerFixed .offset().top - headerFixedHolder .offset().top; 
if (heightScrolled > 100) { 
    $('.to-be-fixed').css('position', 'fixed'); 
} 
});

雖然我k現在css（）方法中的css屬性將無法正常工作，但我不知道該怎麼辦......！請幫我..！

來源

2017-06-16 Rohit Sharma

首先，您不必在標頭上使用position:fixed。那會造成不必要的問題。保持position:absolute，改變只在頂部位置

此外，要觸發這個事件中，你需要使用一個scroll()功能鏈接到您的滾動到元素（在這種情況下，container）。

見下面的代碼片段

有了這個代碼，的top價值的header將等於.container內部的距離scrolled。所以它會一直保持在頂端，給人以固定位置的印象。然後，在滾動100px的情況下，頂部位置變爲0，所以標題再次回到頂部。

var headerFixedHolder = $('.container'); 
 
$(headerFixedHolder).scroll(function() { 
 
    var scrollTop = $(this).scrollTop(), 
 
    headerFixed = $('.to-be-fixed'); 
 
    if (scrollTop > 100) { 
 
    $(headerFixed).css({ 
 
     "top": scrollTop, 
 
    }).show() 
 
    } else { 
 
    $(headerFixed).css({ 
 
     "top": 0 
 
    }).hide() 
 
    } 
 
});

.container { 
 
    position: relative; 
 
    border: 1px solid #ccc; 
 
    overflow-y: auto; 
 
    height: 200px; 
 
    margin-top: 50px; 
 
    width: 500px; 
 
} 
 

 
.to-be-fixed { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 30px; 
 
    text-align: center; 
 
    font-family: Arial; 
 
    padding: 0px 12px; 
 
    background: red; 
 
    width: 100%; 
 
    display: none; 
 
    line-height: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="to-be-fixed"> 
 
    Header to be fixed 
 
    </div> 
 
    <div class="content-holder"> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    <p>content here..!</p> 
 
    </div> 
 
</div>

來源

2017-06-16 13:53:55

真的好...！但還需要做一件事，即在滾動到容器之前應隱藏標題。 –

你見過同樣的輸出嗎！請參閱一次agine，它現在不工作..！ –

真的很好，有幫助的工作..！謝謝@Mihai T. –

-1

我想你應該直接設置在窗口的滾動事件處理元素的位置

來源

2017-06-16 14:01:04

如何使一個元素固定但相對於它的父級滾動？

回答

相關問題