如何使一个元素固定但相对于它的父级滚动？

我有.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

如何使一个元素固定但相对于它的父级滚动？

回答

相关问题