如何修改元素但仅相对于它的父元素滚动？

Question

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

当我在标题中没有使用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');
}
});

虽然我知道css（）方法中的css属性不能正常工作但我不知道该做什么......！ 请帮帮我..！

Answer 1

首先，您不必在标头上使用position:fixed。这会导致不必要的问题。保留position:absolute并仅更改顶部位置

此外，要触发此事件，您需要使用与您滚动的元素相关联的scroll()函数（在本例中为container）。

请参阅下面的代码段

使用此代码，top的{​​{1}}值将等于header内的距离scrolled。所以它总是保持在最顶层，给人一种固定定位的印象。然后，当低于100px的滚动时，顶部位置变为.container，因此标题会再次回到顶部。

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;
}

Answer 2

我认为你应该直接在窗口的滚动事件处理程序中设置元素的位置