Question

如何使元素（元素ID＃move-slower）的移动速度比黄油滚动容器的速度慢？我的目标是将此元素放置在具有页面内容（将使用黄油卷轴）的主容器后面的某个位置，并使其在滚动时的移动速度比黄油卷饼控制的容器慢。

我愿意使用Butter scroll以外的其他jQuery插件，只要我可以实现此插件的相同效果即可。

使用： https://github.com/cmalven/butter-scroll

HTML

<div class="outer-container js-outer-container">
  <div class="inner-container js-inner-container">
  <div id="slower-element"><img src="https://via.placeholder.com/100x300.png/09f/fff" alt=""></div>
   <div class="container">
  <div class="row">
    <div class="col">
      <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
    </div>
    <div class="col">
      <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
    </div>
  </div>
  <div class="row">
     <div class="col">
      <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
     </div>
     <div class="col">
      <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
     </div>
     <div class="col">
      <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
     </div>
   </div>  
  </div>
 </div>
</div>

JS

   new ButterScroll({
        $containerEl: jQuery('.js-outer-container'),
        $elToScroll: jQuery('.js-inner-container'),
        scrollEase: 0.07, // optional
        maxDepthOffset: 500 // optional
   });

CSS

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.inner-container {
  overflow: hidden;
}
img {
  max-width:100%;
  height:auto;
}
#slower-element {
  position:fixed;
  top:0;
  left:0;
}

小提琴 https://jsfiddle.net/ts7j3n5z/

使用Butter Scroll滚动时元素移动速度变慢

0 个答案: