javascript - 如何让div滚动滑动？

Question

当我达到特定的scrollTop()值时，我想制作一个div幻灯片(向内、向外、向左、向上、向右或向下)。但是，我不希望它触发一些动画...我希望 div 随滚动移动，就像这里实现的效果:http://www.tioluchin.com/

到目前为止，我得到的“最接近”的是:

var vistaEstandar = document.getElementById('vista');
vistaEstandar.onscroll = function() {animacionesEstandarVista()};
    function animacionesEstandarVista() 
    {
        var ypos  = vistaEstandar.scrollTop;

        if (($(window).width() >= 1800 && vistaEstandar.scrollTop > 6053) || ($(window).width() > 1800 && document.documentElement.scrollTop > 6053)) {
            var image= document.getElementById("seccion9textoSegundo");
            var toppin = ypos/6053;
            image.style.top = toppin*150 + 'px';
        }
        else
        {};

但是，这不起作用，因为我设法设置的值太低。

我尝试组合的网络很长，因此当我乘以该值时，它要么太高要么太低。

在网站http://www.tioluchin.com/我想要刀具和食物的效果

Answer 1

我研究了那个源代码，因为它让我很好奇。我已经找到了他们是如何做到的。

第一部分是捕获滚动时发生的情况

$(document).scroll(function(){
    windowScroll()
});

他们有一个条件可以在较小的屏幕上禁用它，但这在这里并不重要。

第二部分是这样的:

 function windowScroll(){
  var st = $(document).scrollTop();

  $("#aff").css({"top": 32 - st * 0.15 + "px"});
  $("#aff").css({"left": 48 - st * 0.15 + "px"});
 }

他们的尺寸更大，可以容纳更多元素。这是我的 Playground 。原则上，您必须从当前位置作为偏移量开始。 “st”表示你的深度。 st*0.15 告诉您元素从屏幕上运行的速度。

我的 HTML:

<div class="wrapper">
<div id="aff" class="moving-div">

</div>

和CSS:

 .moving-div {
    width: 3rem;
    height: 3rem;
    position: relative;
    top: 2rem;
    left: 3rem;
    background: red;
  }

  .wrapper {
    height: 1000px;
  }