Question

我有一个速度动画，必须在向下滚动div后加载。 div不是像列表那样的可滚动div，它只是一个普通的div。所以我想要的是像我在屏幕上显示div以及当我在网站上进一步向下滚动以加载某个动画时。我怎么做？这是div，当它滚动时，它应该加载动画。

  <div id="specialDiv2">
      <div class="ui two column doubling stackable grid container">
          <div class="column ">
              <h1>What</h1>
              <p id="coolParagraph2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="column  ">
              <img id="specialImage2" src="meganOMG.png"/>
          </div>
      </div>
      <div class="ui center aligned container">
          <a id="arrow1" href="#">
              <i class="huge red angle double down icon"></i>
          </a>
      </div>
  </div>

这是我必须应用动画的div。

<div id="specialDiv3">
    <div class="ui three column doubling stackable grid container">
        <div class="column columnFade">
            <h1>Benefits</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <i class="massive diamond icon"></i>
        </div>
        <div class="column columnFade">
            <h1>Platform</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <i class="massive diamond icon"></i>
        </div>
        <div class="column columnFade">
            <h1>Vision</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <i class="massive diamond icon"></i>
        </div>
    </div>
    <br>
    <hr width="40%">
    <br>
</div>

Answer 1

你可以制作这样的函数：

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
 }

并使用你的div（elem）

在你的javascript中使用它

这是一个很好的问题和答案，对你有帮助，但这很复杂：

Check if element is visible after scroll

滚动div时触发Velocity动画

1 个答案: