相对于父容器到父容器的粘性位置[重复]答案

【问题标题】：Position sticky relative to parent to parent container [duplicate]相对于父容器到父容器的粘性位置[重复]
【发布时间】：2020-11-09 05:45:54
【问题描述】：

我需要一个相对于父 div 的粘性标题。目前，Header 仅在部分 div 上具有粘性。但我想要一个相对于父类的粘性标题。

HTML 代码

<div class="parent">
   <div class="section-one">
      <h1>Header 1</h1>
      <div class="content">
         content 123
      </div>
   </div>
   <div class="section-two">
      <h1>Header 2</h1>
      <div class="content">
         content 789
      </div>
   </div>
   <div class="section-three">
      <h1>Header 3</h1>
      <div class="content">
         content 456
      </div>
   </div>
</div>

这是我的 CSS，

.parent {
   position: relative;
}
.section-one h1{
   position: sticky;
   top: 0;
   z-index: 9999;
}
.section-two h1{
   position: sticky;
   top: 50;
   z-index: 9999;
}
.section-three h1{
   position: sticky;
   top: 100;
   z-index: 9999;
}

我想要一个如下所示的粘性标题

Header 1
Header 2
Header 3

我想要一个按图片显示的粘性标题。

【问题讨论】：

请帮我分享你的知识。我尝试过但没有解决任何问题。

标签： css sass

【解决方案1】：

$(window).scroll(function() {
    var distanceFromTop = $(this).scrollTop();
    if (distanceFromTop >= $('.section-one').offset().top) {
        $('.section-one h1').addClass('fixed');
    }
    if (distanceFromTop >= $('.section-two').offset().top) {
        $('.section-two h1').addClass('fixed');
    }
    if (distanceFromTop >= $('.section-three').offset().top) {
        $('.section-three h1').addClass('fixed');
    }


    if (distanceFromTop >= $('.parent').height()) {
        $('.section-one h1').removeClass('fixed');
        $('.section-two h1').removeClass('fixed');
        $('.section-three h1').removeClass('fixed');
    }
});

.parent {
   position: relative;
}
.section-one, 
.section-two, 
.section-three { min-height: 100vh; }

.section-one { background: lightgray; }
.section-two { background: lightblue; }
.section-three { background: lightgreen; }

.section-one h1{
   position: sticky;
   top: 0;
   z-index: 9999;
}
.section-two h1{
   position: sticky;
   top: 0;
   z-index: 9999;
}
.section-three h1{
   position: sticky;
   top: 0;
   z-index: 9999;
}


.section-one h1.fixed {
    position: fixed;
    top: 0px;
}
.section-two h1.fixed {
    position: fixed;
    top: 50px;
}
.section-three h1.fixed {
    position: fixed;
    top: 100px;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="parent">
   <div class="section-one">
      <h1>Header 1</h1>
      <div class="content">
         content 123
      </div>
   </div>
   <div class="section-two">
      <h1>Header 2</h1>
      <div class="content">
         content 789
      </div>
   </div>
   <div class="section-three">
      <h1>Header 3</h1>
      <div class="content">
         content 456
      </div>
   </div>
</div>
<div style="height: 100vh; background: green;"></div>

【讨论】：

完成第一节后不要滚动标题 1。如果开始第二部分，则标题 1 必须保留在顶部。
我已经更新了我的问题。请检查一下。
抱歉，你能再告诉我你在找什么吗？因为每个 h1 都停留在它的部分内，滚动时保持粘性。
codepen.io/rahulm1ll3k/pen/vYKVxVp 这应该可以解决问题。
jQuery 可以改进。您可以通过将 .fixed 添加到每个部分下的 h1 来控制标题位置和样式，如下所示：.section-one h1.fixed {}