当我们滚动到特定位置时为 div 设置动画

Question

我有一个函数，当从页面顶部滚动到scrolling div高度的 -600（这意味着在到达scrolling div的底部之前）时，将slider-side-hr的宽度减小到 0。
滑块两侧都是固定的，一个在右边，另一个在左边。

  <div class="tower" id="tower2">
      <div class="scroll-slider-hr">
          <div class="slider-side-hr slider-side1"></div>
          <div class="slider-side-hr slider-side2"></div>
      </div>
  </div>

它运行完美，两者的宽度slider-side-hr滚动时降低到0，但我有一个问题，当scrolling div未在页面的顶部。

我需要一个仅在（ scrolling div ）到达页面底部 + 100px时才执行该函数的条件，这意味着我可以首先看到slider-side-hr全宽（ scrolling div height为 100 100px ）然后它开始滚动时减少到 0，当达到scrolling div一半时它应该减少到 0

 var $scrollingDiv = $("#tower2"); $(window).scroll(function() { var winScrollTop = ($(document).scrollTop() + 0); var zeroSizeHeight = $scrollingDiv.height() - 600; var newSize = 250 * (1 - (winScrollTop / zeroSizeHeight)); $('.slider-side-hr').css({ width: newSize, }, 500, 'easeInOutSine'); });

 .container-full { width: 100%; margin-right: auto; margin-left: auto; } .tower { position: relative; } #tower1 { /*margin-bottom: 700px*/ } #tower2 { background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)); background-position: center; background-size: cover; background-repeat: no-repeat; height: 140vh; background-attachment: fixed; position: relative; overflow: hidden; } .slider-side-hr { position: absolute; top: 0; bottom: 0; width: 250px; height: 100%; background: #ddd; } .slider-side1 { left: 0; } .slider-side2 { right: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <dic class="container-full"> <div class="tower" id="tower1"> </div> <div class="tower" id="tower2"> <div class="scroll-slider-hr"> <div class="slider-side-hr slider-side1"></div> <div class="slider-side-hr slider-side2"></div> </div> </div> </div>

Answer 1

此代码的工作原理：

JS

从#tower2顶部获取有关位置的信息并将其分配给变量ftop

我们从ftop减去滚动值。 当该值小于 0 时，开始向.slider-side-hr传输新值。

.slider-side-hr的宽度初始值设置为#tower2宽度的50%

如果你想改变“动画”速度......改变这一行：

var newSize = zeroSizeWidth + scl; 到这个var newSize = zeroSizeWidth + scl * 2;

（如果您希望动画响应桌面和移动设备，您可以将值* 2设为屏幕宽度的百分比）

CSS

所做的更改是类.slider-side-hr值width: 100%;

我希望我有所帮助

 var $scrollingDiv = $("#tower2"); var ftop = $scrollingDiv.offset().top; var zeroSizeHeight = $scrollingDiv.height(); var zeroSizeWidth = $scrollingDiv.width() / 2; $(window).scroll(function () { var winScrollTop = $(window).scrollTop(); var scl = ftop - winScrollTop; if (scl < 0) { var newSize = zeroSizeWidth + scl * 2; } else { var newSize = zeroSizeWidth; } $('.slider-side-hr').css({ width: newSize, }, 500, 'easeInOutSine'); });

 .container-full { width: 100%; margin-right: auto; margin-left: auto; } .tower { position: relative; } #tower1 { /*margin-bottom: 700px*/ } #tower2 { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); background-position: center; background-size: cover; background-repeat: no-repeat; height: 140vh; background-attachment: fixed; position: relative; overflow: hidden; } .slider-side-hr { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; background: #ddd; } .slider-side1 { left: 0; } .slider-side2 { right: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="container-full"> <div class="tower" id="tower1"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit. </div> <div class="tower" id="tower2"> <div class="scroll-slider-hr"> <div class="slider-side-hr slider-side1"></div> <div class="slider-side-hr slider-side2"></div> </div> </div> </div>