Question

我正在尝试在滚动经过某个点时在页面顶部实现徽标面板的简单动画，如果它向上滚动则实现。我使用jquery的.animate()函数来改变一些css参数。我还使用.stop()函数来打破滚动侦听器，这样整个动画就可以无滞后地工作。

它几乎就在那里，但我注意到动画期间发生了一些生涩的延迟。例如，当我向下滚动时，它向下缩小，但不是一直向下缩小，只是稍微向下跳跃到完全按比例缩小的位置。向上滚动时会发生同样的情况 - 它会缩放一半甚至暂停几次，然后再缩放。您认为会导致什么？

这是我的代码：

(function($) {
    $(document).ready(function() {
        var animScroll;
        $(window).scroll(function() {

            if ($(this).scrollTop() > 700) {
                animScroll = true;
                $('#menu').stop().animate({height: '50px'}, {
                    queue: false,
                    duration: 400
                });

                $('#toplogo').stop().animate({width: '150px'}, {
                    queue: false,
                    duration: 400
                });

            } else if ($(this).scrollTop() < 700) {
                $('#menu').stop().animate({height: '85px'}, {
                    queue: false,
                    duration: 400
                });

                $('#toplogo').stop().animate({width: '300px'}, {
                    queue: false,
                    duration: 400
                });
            }
        });
    });
})(jQuery);

Answer 1

JQuery在动画方面并不是最快的。下面我使用CSS。请注意我将翻转点更改为300像素。

＆＃13;

(function($) {


  $(document).ready(function() {
    var animScroll;
    $(window).scroll(function() {

      if ($(this).scrollTop() > 300) {

        $('#toplogo').addClass("smaller");


      } else if ($(this).scrollTop() < 300) {

        $('#toplogo').removeClass("smaller");

      }
    });
  });
})(jQuery);

＆＃13;

.container {
  height: 1000px;
}

#menu {
  position: fixed;
  top: 0;
}

#toplogo {
  transition: all .2s ease-in-out;
}

#toplogo.smaller {
  transform: scale(0.5, 0.5);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="menu">
    <img id="toplogo" src="http://placehold.it/200">
  </div>
</div>

＆＃13;

滚动

1 个答案: