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

Question

slider-side-hr我有一个功能，当从页面顶部滚动到scrolling div高度的 -600 时（这意味着在到达底部之前） ，将宽度减小到 0 scrolling 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>

它工作得很好，slider-side-hr滚动时两者的宽度都减小到 0，但是当 不在页面顶部时我遇到了问题 scrolling div。我需要一个仅在 ( ) 到达页面底部 +时执行函数的条件，这意味着我可以首先看到全宽（带有）然后在滚动时它开始减小到 0，并且应该减小到 0当达到一半时

scrolling div100pxslider-side-hr100pxscrolling div heightscrolling div

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>

标签： javascripthtmljquerycss

Answer 1

此代码如何工作：

JS

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

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

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

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

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>