javascript - 如何使元素固定但仅在滚动时相对于其父元素？

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你的值(value)header将等于距离 scrolled在.container里面.所以它会一直停留在顶部，给人固定定位的印象。然后，当滚动到 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>