javascript - 将一个粘性 div 滚动到另一个

Question

我有一个 div，一旦滚动到容器顶部就会粘住 - 类似于此 fiddle 我发现并破解了(我很欣赏代码不是很好，但用于显示我的问题)。

我希望下一个 div 滚动到前一个 div 上，并且在到达相同位置后也保持不变。目前，我只能让 div 继续向后滚动，或“跳跃”，就像它现在正在做的那样。

我希望实现一组滚动的 div，每个 div 都固定在容器的顶部，一个接一个，一个接一个地固定，而不是继续滚动超出 - 这是我能想到的唯一选择迄今为止。

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky').addClass('stick');
    $('#sticky-anchor').height($('#sticky').outerHeight());
  } else {
    $('#sticky').removeClass('stick');
    $('#sticky-anchor').height(0);
  }
}

$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky1').addClass('stick');
    $('#sticky-anchor').height($('#sticky1').outerHeight());
  } else {
    $('#sticky1').removeClass('stick');
    $('#sticky-anchor').height(0);
  }
}

$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});

#sticky,
#sticky1 {
  padding: 0.5ex;
  width: 400px;
  background-color: #333;
  color: #fff;
  font-size: 2em;
  border-radius: 0.5ex;
}

#sticky.stick {
  margin-top: 0 !important;
  position: fixed;
  top: 0;
  z-index: 1;
  border-radius: 0 0 0.5em 0.5em;
}

#sticky1.stick {
  margin-top: 0 !important;
  position: fixed;
  top: 0;
  z-index: 2;
  border-radius: 0 0 0.5em 0.5em;
}

body {
  margin: 1em;
}

p {
  margin: 1em auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<p>...</p>
<div id="sticky-anchor"></div>
<div id="sticky1">This should continue to scroll and stick on top
</div>
<p>...</p>

Answer 1

这个怎么样？至少应该是一个开始。

https://jsfiddle.net/mqf7h5dz/

HTML:

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top;

  $('.sticky').each(function() {
    //$(this).find(".scrolling").width( width * imgLength * 1.2 );
    div_top = $(this).offset().top;
    console.log("Top for this div: ", div_top);

    if (window_top > div_top) {
      $(this).removeClass('sticky');
      $(this).addClass('sticked');
      //$(this).height($('.sticky').outerHeight());

      $(this).clone().appendTo($('#sticky_container'));
    }
  });
}

$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});

.sticky {
  padding: 0.5ex;
  width: 400px;
  background-color: #333;
  color: #fff;
  font-size: 2em;
  border-radius: 0.5ex;
}

.sticky-header {
  padding: 0.5ex;
  width: 400px;
  background-color: #333;
  color: #fff;
  font-size: 2em;
  border-radius: 0.5ex;
}

#sticky_container {
  position: fixed;
  top: 0;
}

.sticky.stick {
  margin-top: 0 !important;
  position: fixed;
  top: 0;
  z-index: 1;
  border-radius: 0 0 0.5em 0.5em;
  background: red;
}

body {
  margin: 1em;
}

p {
  margin: 1em auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky_container"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque, lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus. Maecenas lacinia bibendum
  accumsan. Curabitur lobortis convallis purus non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat. Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan ullamcorper lorem id porttitor. Aliquam vitae
</p>

<div class="sticky-anchor"></div>
<div class="sticky sticky-header">This will stay at top of page</div>

<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
  Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
  eget.
</p>

<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
  Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
  eget.
</p>

<div class="sticky-anchor"></div>
<div class="sticky sticky-header">This should continue to scroll and stick on top
</div>

<p>
  Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
  Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
  eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
  sit amet sodales risus leo quis nisi.</p>

<p>
  Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
  Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
  eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
  sit amet sodales risus leo quis nisi.</p>

<p>
  Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
  Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
  eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
  sit amet sodales risus leo quis nisi.</p>