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

时间：2018-12-26 14:36:31

标签： javascript jquery css scroll position

我有几个部分。每个部分我都有一个位置为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>

enter image description here

2 个答案:

答案 0 :(得分：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>

您应该意识到，在每个滚动事件上执行此操作都会对性能造成严重影响。理想情况下，您可以找到一种更聪明的方式来缓存位置，并可能限制事件，这样您就不必为用户滚动的每个像素做太多的工作。但希望这能给您一个想法并帮助您入门。

答案 1 :(得分：-1)

这甚至不需要JS。

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

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

完全打开以下代码段：

.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>

相关问题
最新问题