на прокрутке установить содержимое в нижней части раздела, когда прошел через этот раздел - PullRequest
Новая
       18

на прокрутке установить содержимое в нижней части раздела, когда прошел через этот раздел

0 голосов
/ 26 декабря 2018

У меня есть несколько разделов.В каждом разделе у меня есть div с позицией absolute, когда прокручивается, что верхняя позиция div обновляется, это нормально.

Теперь я хочу, когда я закончу прокрутку определенного раздела и попытаюсь прокрутить другой раздел, div старого раздела будет исправлен.в той области, где этот раздел заканчивается без скрытия.

Вот пример анимации Вот мой код 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 голосов
/ 26 декабря 2018

Для этого даже не требуется 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>
0 голосов
/ 26 декабря 2018

Я не уверен на 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>

Вы должны знать, что выполнение этого на каждом событии прокрутки будет очень плохо для производительности.В идеале вы должны найти более умный способ кэширования позиции и, возможно, задушить события, чтобы не делать так много работы для каждого пикселя, который пользователь прокручивает.Но, надеюсь, это даст вам представление и поможет вам начать работу.

...