javascript - 使 div 位置的子项固定在滚动时 div 的顶部，并设置子项的动画高度

Question

我小时候有一个名为 box 的 div，带有一个 header div。当 div 滚动时，我希望将标题 div 粘贴(固定)到顶部，以便用户始终可以看到标题。当用户向下滚动时，标题的高度应该降低以占用更少的空间，但仍允许用户看到标题内容。当用户向上滚动时，标题应该被取消，并且高度应该像它在顶部时发生任何滚动之前的那样。

我不喜欢我即将向您展示的尝试，因为我得到了框相对于文档的 offset。我觉得这可能没有必要，因为可能有一个 css 解决方案。 this一个是整个文档的滚动。该演示显示使用固定位置，它固定在页面顶部。我不能使用固定位置，因为我认为这是针对窗口而不是 div，所以下一个最好的方法是什么？

我不喜欢 header 的宽度超过滚动条的方式。并且动画跳动而且不起作用。

$(function(){
  var btop = $(".box").offset().top;
  bwidth = $(".box").innerWidth();
  $(".box").on("scroll", function(e){

    if($(this).scrollTop() > 50){
      $(this).find(".header").css({
        "position" : "absolute",
        "top" : btop,
        "max-width" : bwidth,
      }).animate({
        "height" :"2em"
      })
    }else{
      $(this).find(".header").css({
        "position" : "static",
        "top" : btop,
        "max-width" : bwidth
      }).animate({
        "height" :"3em"
      })
    }
  })
})

.box{
  margin: 4em auto;
  height: 12em;
  width: 20em;
  background: blue;
  overflow-y: scroll; 
  /*overflow-x: hidden;*/
  /*position: relative;*/
}
.header{
  background: orange;
  width: 100%;
  height: 3em;
  font-size: 1.3em;
}
.content{
  width: 90%;
  margin: 0 auto;
  background: powderblue;
  height: 12em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="box">
  <div class="header">This will stick</div>
  <div class="content">Other content</div>
  <div class="content">Somemore content</div>
</div>

Answer 1

这只是一个想法，但在你的情况下，你可以用一个简单的技巧来伪造一个粘性标题。

1. 删除 .box div 的 overflow-y: scroll 属性。

2. 为您的 .header 设置一个 position: absolute 属性。

3. 添加一个包含您的 .content div 的 div .content-container 和 也为其设置一个 position: absolute 属性和一个 overflow-y: scroll。

这样你的标题总是在你的 .box div 之上，你可以滚动你的内容。然后使用您的 JS 代码，您可以在 scroll 事件 上更改 header 的高度。

$(document).ready(function(){
  $('.content').scroll(function(){
    if ($('.content').scrollTop() >= 60){
      $('.header').addClass('sticky');
    } else {
      $('.header').removeClass('sticky');
    }
  });
});

.box{
  margin: 4em auto;
  height: 360px;
  width: 20em;
  background: blue;
  position: relative;
}
.header{
  position: absolute;
  top: 0;
  background: orange;
  width: 100%;
  height: 60px;
  font-size: 1.3em;
  z-index: 9999;
  transition: height 0.3s ease 0s;
  -webkit-transition: height 0.3s ease 0s;
  -moz-transition: height 0.3s ease 0s;
}
.header.sticky{
  height: 30px;
}
.content{
  position: absolute;
  top: 0;
  width: 100%;
  height: 300px;
  padding-top: 60px;
  background: powderblue;
  overflow-y: scroll;
}
.content > div{
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box">
  <div class="header">This will stick</div>
  <div class="content">
    <div>Content</div>
    <div>Somemore content</div>
  </div>
</div>