浏览该部分时，在该部分底部滚动设置内容

Question

我有几个部分。每个部分我都有一个位置为absolute的div 当它滚动时，div 顶部位置正在更新它没关系。

现在我希望当我完成滚动特定部分并尝试滚动另一个部分时，旧部分的 div 将固定在该部分将结束而不隐藏的区域。

Here is sample animation 这是我的代码 JSFIDDLE

function active_menu_item(){

 var elements = ['#message', '#feature', '#course', '#education', '#facility', '#access', '#contact'];
    var top_of_screen = $(window).scrollTop();
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        var top_of_element = $(element).offset().top;
        var top_set = top_of_screen - top_of_element + 50;
        var divHeight = $(element).height();
            
        if (top_of_element < top_of_screen) {
            $(element).find('.content_side_left').css('top', (top_of_screen - top_of_element + 50) + 'px');   
            
        }
    }
    
 }
jQuery(document).on('scroll', function(){
  //$(window).scroll(function() {
    active_menu_item();
});

.content_item {
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    height:500px;
    background:gray;
    font-size:30px;
    
}
.content_side_left {
    position: absolute;
    top: 50px;
    left: 0;
    text-align: center;
    z-index: 100;
}
.content_side_left {
    width: 118px;
}

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="message" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>
<div id="message" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>
<div id="feature" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>
<div id="course" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>
<div id="education" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>
<div id="facility" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>
<div id="access" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>
<div id="contact" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>

Answer 1

我不能 100% 确定这是否是您要查找的内容，这个问题似乎有点含糊。但是，如果我理解正确，您希望在离开“部分”并在其下方粘贴下一个粘性项目时保持先前卡住的项目可见。为此，我只跟踪循环迭代过程中要坚持的顶部位置，并为我遇到的每个粘性元素增加它。代码如下：

function active_menu_item(){
    //get all elements that are meant to be sticky
    var elements = document.querySelectorAll('.content_item .content_side_left');
    elements = [].slice.call(elements);//turn it into an array
    for(var element of elements){
      //reset all of the elements so we can calculate their natural position in the document
      element.style.position = "relative";
    }
    var top_of_screen = $(window).scrollTop();
    var top_position = 0;//track the place to stick the element
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        //get the position relative to viewport
        var top_of_element = element.getBoundingClientRect().top;
        
        var divHeight = $(element).height();
        //check to see if we are below the next "stick to" position
        if (top_of_element <= top_position) {
          element.style.position='fixed';
          element.style.top = top_position + 'px';
          top_position += divHeight;//increment the "stick to" position
            
        }
    }
    
 }
jQuery(document).on('scroll', function(){
  //$(window).scroll(function() {
    active_menu_item();
});

.content_item {
    position: relative;
    width: 100%;
    /* z-index: 1;*/
    overflow: hidden;
    height:500px;
    background:gray;
    font-size:30px;
    
}
.content_side_left {
    position: absolute;
    top: 50px;
    
    text-align: center;
    z-index: 100;
    border:1px solid #333;
}
.content_side_left {
    width: 118px;
}

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="message" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>
<div id="message" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>
<div id="feature" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>
<div id="course" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>
<div id="education" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>
<div id="facility" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>
<div id="access" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>
<div id="contact" class="content_item">    
    <div class="content_side_left" >
      sticky content
    </div>
</div>

您应该知道，在每个滚动事件上执行此操作对性能非常不利。理想情况下，您可以找到一些更聪明的缓存位置的方法，并且可能会限制事件，这样您就不会为用户滚动的每个像素做这么多的工作。但希望这能给您一个想法并帮助您入门。

Answer 2

这甚至不需要 JS。

由于溢出，最后一个显然会超过另一个。但这可以通过将每个 div 的顶部更改为挤压或超出顶部来解决：

尝试从 -390、-260、-130、0、130... 设置顶部并添加更多元素；或将窗口大小调整为 800 像素或更小。一旦您知道正在滚动的内容（低于视口高度），这些值就会变为负数。

打开以下 sn-p 的全尺寸：

.content_item {
  position: relative;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  height: 500px;
  background: gray;
  font-size: 30px;
  background-color: tomato;
  border: 1px solid red;
}
.content_side_left {
  position: absolute;
  top: 50px;
  left: 0;
  text-align: center;
  z-index: 100;
  width: 118px;
}

#message1 {
  position: sticky;
  top: 0;
}
#message2 {
  position: sticky;
  top: 130px;
}
#message3 {
  position: sticky;
  top: 260px;
}
#message4 {
  position: sticky;
  top: 390px;
}
#message5 {
  position: sticky;
  top: 550px;
}
#message6 {
  position: sticky;
  top: 680px;
}
#message7 {
  position: sticky;
  top: 810px;
}

<div id="message1" class="content_item">
      <div class="content_side_left">sticky content</div>
    </div>
    <div id="message2" class="content_item">
      <div class="content_side_left">sticky content</div>
    </div>
    <div id="message3" class="content_item">
      <div class="content_side_left">sticky content</div>
    </div>
    <div id="message4" class="content_item">
      <div class="content_side_left">sticky content</div>
    </div>
    <div id="message5" class="content_item">
      <div class="content_side_left">sticky content</div>
    </div>
    <div id="message6" class="content_item">
      <div class="content_side_left">sticky content</div>
    </div>
    <div id="message7" class="content_item">
      <div class="content_side_left">sticky content</div>
    </div>