Question

我在onscroll事件中遇到动画问题。

当我向下滚动并且div显示没有任何问题时if条件工作得非常好，但是当我向上滚动时，else条件不起作用，所以div不会隐藏并且仍然显示。

这是代码：

$(function () {

    'use strict';

    var myDiv1 = $('div'),
        div1Top = (myDiv1.offset().top) / 2;

    $(window).on('scroll', function () {

        var docScrollTop = document.documentElement.scrollTop;

        if (docScrollTop >= div1Top) {

            $('div').animate({opacity: '1'}, 800);

        } else {

            $('div').css('opacity', '0');
        }
    });
});

Answer 1

这可能不是完全您正在尝试做什么，但我认为这是在正确的球场：

<html>

  <style>
    div {
      width: 500px;
      height: 500px;
    }
    .animated_div {
      background-color: green;
      position: absolute;
      top: 2000px;
      opacity: 0;
    }
    .placeholder {
      position: absolute;
      top:4000px;
    }
  </style>

  <body>
    <div class="animated_div"></div>  <!--The div that will actually be animated-->
    <div class="placeholder"></div>   <!--This is just something below the animated DIV, so that you can scroll below the animated DIV -->
  </body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">

    $(function () {

      'use strict';

      var myDiv1 = $('.animated_div');

      // Start animating the div relative to its middle
      var div1Middle = myDiv1.offset().top + myDiv1.height() / 2;

      // Keep track of whether the animated_div is displayed or not
      var myDiv1Shown = false;    

      $(window).on('scroll', function () {

          var docScrollTop = $(window).scrollTop();               // Top of the window in page coordinates
          var docScrollBottom = docScrollTop+$(window).height();  // Bottom of the window in page coordinates

          if (div1Middle > docScrollTop && div1Middle < docScrollBottom && !myDiv1Shown) {
              // The div middle is within view and it's not already shown, so we need to show it
              myDiv1Shown = true;
              myDiv1.animate({opacity: '1'}, 800);
          } else if ((div1Middle > docScrollBottom || div1Middle < docScrollTop) && myDiv1Shown) {
              // The div middle is out of view and it's shown, so we need to hide it
              myDiv1Shown = false;
              myDiv1.animate({opacity: '0'}, 800);
          }

      });

    });

  </script>     

</html>

这会在视图中将div不透明度更改为1，并在视图不可见时将其更改为0。如果它的垂直中间在视野中，它被视为在视图中。

如果您想要做的事情基本上是当用户将其滚动到视图中时淡入div，然后当用户将其滚出视图时淡出div，您可以将其视为替代：

<html>

  <style>
    div {
      width: 500px;
      height: 500px;
    }
    .animated_div {
      background-color: green;
      position: absolute;
      top: 2000px;
      opacity: 0;
    }
    .placeholder {
      position: absolute;
      top:4000px;
    }
  </style>

  <body>
    <div class="animated_div"></div>  <!--The div that will actually be animated-->
    <div class="placeholder"></div>   <!--This is just something below the animated DIV, so that you can scroll below the animated DIV -->
  </body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">

    $(function () {

      'use strict';

      var myDiv1 = $('.animated_div');

      var div1Top = myDiv1.offset().top;
      var div1Height = myDiv1.height();
      var div1Bottom = div1Top + div1Height;

      $(window).on('scroll', function () {

          var docScrollTop = $(window).scrollTop();               // Top of the window in page coordinates
          var docScrollBottom = docScrollTop+$(window).height();  // Bottom of the window in page coordinates

          // Calculate fraction of div on page
          var topOffPage = Math.max(0, docScrollTop - div1Top);
          var bottomOffPage = Math.max(0, div1Bottom - docScrollBottom);
          var fractionOnPage = Math.max(0, div1Height - topOffPage - bottomOffPage)/div1Height;

          myDiv1.css('opacity', fractionOnPage);

      });

    });

  </script>     

</html>

上面的片段将div的不透明度设置为视图中的分数（仅考虑垂直维度）。因此，如果整个DIV都在屏幕上，那么它就完全不透明了。如果只有一半在屏幕上（其中一半在卷轴顶部上方或在卷轴底部下方），则不透明度为0.5，依此类推。如果div相对于屏幕较大，那么这可能会导致问题。例如，如果你有一个1000像素的div，并且人们正在查看高度为500px的视口的页面，那么div最多只能是50％不透明。但是你可以根据自己的情况调整它。

onquroll函数中的jquery else条件

1 个答案: