Question

我想尝试这样的工作 - https://www.acnestudios.com/nl/en/avalon-double/12F163-1G2.html?categid=woman-coats-jackets。

想法是让产品描述变得粘稠，直到图像/图像的末尾滚动然后停留在容器中，在底部直到再次向上滚动然后再次变粘。

position: sticky;会很好，如果浏览器支持它，但它不是：（

找到附带的jsfiddle：https://jsfiddle.net/pn7Lzgs1/

我猜这将是某种onscroll addEventListener

谢谢！

Answer 1

只需将以下代码添加到您的脚本中即可。

$( document ).scroll(function() {
    var scroll = $(window).scrollTop();
    if(scroll > 100){
        $("body").addClass("scroll1");
    }
});

您现在可以在css中添加以下样式。

body.scroll1 .yourElement{
    position:fixed;
}

Answer 2

你有没有尝试过css方式，

position: sticky;
top: 10px; // (or) bottom: 10px;

希望这有帮助！

Answer 3

编辑：这是一个比我之前的建议更好的解决方案：

＆＃13;

$(document).on('scroll',function(){
var i_pos = $('.image-wrapper').offset();
var i_posY = i_pos.top;
var i_posY_px = i_posY + 'px';
var i_height = $('.image-wrapper').height();
var i_height_px = i_height + "px";
var screen_h = $(window).height();
var scroll_p = $(document).scrollTop();
var o = 0;


document.body.style.setProperty('--h', i_height_px);

// If scroll position is above element...  
if((i_posY) > scroll_p){
$('.sticky-content-wrapper').addClass('absolute_top');
  $('.sticky').removeClass('sticky-flex');
}

// If element needs to be positioned fixed

if((i_posY) <= scroll_p && (i_posY + i_height) > (scroll_p + screen_h)){
$('.sticky-content-wrapper').removeClass('absolute_top').removeClass('absolute_bottom');
$('.sticky').addClass('sticky-flex');

}
// When fixed positioning has to stop
if((i_posY) <= scroll_p && (i_posY + i_height) < (scroll_p + screen_h)) {
$('.sticky-content-wrapper').addClass('absolute_bottom');
$('.sticky').removeClass('sticky-flex');
}

});

＆＃13;

:root {
  --h: auto;
  --o: 0px;
}

html {
  box-sizing: border-box;
}

.nav {
  text-align: center;
  padding: 25px 0;
  background-color: teal;
  margin-bottom: 50px;
}

.below {
  padding: 400px 0 50px;
  background-color: teal;
}

.row {
  position:relative;
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
}

.images {
  width:200px;
}

.image-wrapper {
  width:150px;
}

.sticky {
  position:relative;
  height: var(--h);
}

.sticky-content-wrapper {
  width:300px;
  display:flex;
  align-items:center;
  height:100vh
}

.absolute_bottom {
  position:absolute;
  bottom:0;
}

.sticky-flex {
  position:fixed;
  top:0;
  left:208px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="nav">
    <h1>NAVIGATION</h1>
  </div>
  <div class="row">
    <div class="col-6 images">
      <div>
      <div class="image-wrapper">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        </div>
        <p>Needs to stop being sticky at this point (at the end of last image)</p>
      </div>
    </div>
    <div class="col-6 sticky">
      <div class="sticky-content-wrapper">
        <div>
      <h2>This needs to be sticky</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quibusdam quasi, odio magnam eligendi eos nam inventore ullam omnis, debitis iusto possimus alias error, voluptas sit cum corporis sapiente illo!</p>
    </div>
      </div>
    </div>
  </div>
  <div class="row2 below">
    <h2>Content below</h2>
  </div>
</div>

＆＃13;

编辑结束

我已经提出了这个解决方案，绝对定位信息元素并使用css变量和JS更改其在滚动上的位置。但是有一种抖动效应当然不值得观看。所以我觉得使用固定位置会更好。如果您对此感兴趣，我会稍后尝试编写代码。如果您对此解决方案有疑问，请告诉我。

＆＃13;

$(document).on('scroll',function(){
var i_pos = $('.image-wrapper').offset();
var i_posY = i_pos.top;
var i_height = $('.image-wrapper').height();
var i_height_px = i_height + "px";
var screen_h = $(window).height();
var scroll_p = $(document).scrollTop();
var o = 0;
if((i_posY - scroll_p) < 0) {

if((scroll_p + screen_h) < (i_posY + i_height)){

document.body.style.setProperty('--h', i_height_px);
o = scroll_p - i_posY ;
o = o + "px";
document.body.style.setProperty('--o', o);
}
else {}
}
});

＆＃13;

:root {
  --h: 100vh;
  --o: 0px;
}

html {
  box-sizing: border-box;
}

.nav {
  text-align: center;
  padding: 25px 0;
  background-color: teal;
  margin-bottom: 50px;
}

.below {
  padding: 400px 0 50px;
  background-color: teal;
}

.row {
  position:relative;
}

.image-wrapper {
  width:150px;
}

.sticky {
  position: absolute;
  overflow:hidden;
  width:300px;
  left:180px;
  top: var(--o);
  height: var(--h);
  max-height: 100vh;
  display: flex;
  align-items:center;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="nav">
    <h1>NAVIGATION</h1>
  </div>
  <div class="row">
    <div class="col-6 images">
      <div>
      <div class="image-wrapper">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        <img src="http://via.placeholder.com/150x100" alt="">
        </div>
        <p>Needs to stop being sticky at this point (at the end of last image)</p>
      </div>
    </div>
    <div class="col-6 sticky">
      <div class="sticky-content-wrapper">
      <h2>This needs to be sticky</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quibusdam quasi, odio magnam eligendi eos nam inventore ullam omnis, debitis iusto possimus alias error, voluptas sit cum corporis sapiente illo!</p>
    </div>
    </div>
  </div>
  <div class="row below">
    <h2>Content below</h2>
  </div>
</div>

＆＃13;

粘贴/固定滚动直到父容器结束 - CSS / JS

3 个答案: