如何触发Orl事件

Question

如何使用滚动事件触发或执行类动画如何触发如何使用滚动事件触发或执行类动画如何使用滚动事件触发或执行类动画如何如何使用滚动事件触发或执行类动画事件如何使用滚动事件触发或执行类动画如何使用滚动事件触发或执行类动画如何使用滚动事件触发或执行类动画         至         {             背景位置：-10234px；         }     }

@keyframes close
{
    from
    {
        background-position: -10234px;

    }
    to
    {
        background-position: 0;
    }
}

JS：

  $(function(){
  $(window).scroll(function(){

    var st = $(this).scrollTop();

    if(st >= 599){
      var element = document.getElementById("myDIV");
          element.classList.remove("close");
          element.classList.add("open");
          element.classList.remove("static");
      console.log('OPEN!');
    }
    else if(st <= 600 && st < 600){
      var element = document.getElementById("myDIV");
      element.classList.remove("open");
      element.classList.add("close");
      element.classList.remove("static");
  console.log('CLOSE!');

    }
    else {

    }
  });
  });

Answer 1

这是2018年最后一天的一个非常懒惰的答案...新年快乐;）

$(function(){
  $(window).scroll(function(){

    var st = $(this).scrollTop();

    if(st >= 599 && st < 799){
      var element = document.getElementById("myDIV");
      element.classList.add("animateOpenScroll");
    }
    else if(st >= 799){
       //do whatever you need to do if scroll top reaches (or surpasses) 799
    }
    else {
       //you'll need this. Fall back to the initial state...when scroll top is less than 599
    }
  });
  });

更多详细信息

主要问题是您的div具有2个状态，而不是3个状态。它处于打开或关闭状态，然后您的if...else块没有反映出这一点……实际上，这有点在这个地方...例如这个...

else if(st <= 600 && st < 600){}

没什么意义，更不用说空的else块了，它在这种情况下基本上与else if块相同。您需要先整理代码以使其更易于理解...

整理

.static，.open和.close CSS类基本上是相同的，唯一的区别是最后两个添加了动画。您可以轻松删除这些声明。这是您的新.open，.close课程...

.open{
    animation: open 0.5s steps(14);
    animation-fill-mode: forwards;
    animation-play-state: running;
}

.close{
    animation: close 0.5s steps(14);
    animation-fill-mode: forwards;
    animation-play-state: running;
}

现在在您的jQuery代码中，您无需添加/删除.static css类。另外，您需要跟踪div的状态，以了解何时播放.close动画，何时不播放。 查看下面的所有更改...

var open = false;

$(function(){
  var element = document.getElementById("myDIV");
  var scrollMarker = 599;
  
  $(window).scroll(function(){

    var st = $(this).scrollTop();

    if(st >= scrollMarker){
      open = true;
      element.classList.remove("close");
      element.classList.add("open");
    }
    
    //plays the close animation only if the "state" of the div is open
    else if(open) {
    	open = false;
      element.classList.remove("open");
      element.classList.add("close");

    }
    
  });
  
});

body {
    background-color: black;
  margin: 0;
  padding: 0;
    height: 2500px;
}

.static{
    position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(10965px / 15);
  height: 499px;
  background: url(https://www.nvidia.com/content/dam/en-zz/Solutions/titan/titan-rtx/titan-rtx-exploded-view-v022-seq1-15f-ld.jpg);
}

.open{
    animation: open 0.5s steps(14);
    animation-fill-mode: forwards;
    animation-play-state: running;
}

.close{
    animation: close 0.5s steps(14);
    animation-fill-mode: forwards;
    animation-play-state: running;
}

@keyframes open
{
    from
    {
        background-position: 0;
    }
    to
    {
        background-position: -10234px;
    }
}


@keyframes close
{
    from
    {
        background-position: -10234px;

    }
    to
    {
        background-position: 0;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDIV" class="static"></div>

如果要查看动画或...更改scrollMarker的值，则可能必须单击“整页”