Question

当用户滚动时，如何停止运行多次的css和动画函数？目前，它们会针对用户滚动的每个像素触发，这会导致问题！

<script>
  var elementPosition = $('#main-wrap').offset();
  var x = 0;

  $(window).scroll(function(){
    if($(window).scrollTop() > elementPosition.top && x != 0){
      $('#dropdown-navwrap .dropdown-bar').animate({ width: "80%", overflow: "visible" }, 400);
      $('#header').animate({ top: "44px" }, 400, function() { $(this).animate("padding", "0"); });

      $('#hdr-logo').animate({ opacity: "0" }, 400, function() { $(this).css("display", "none"); });
      $("#hdr-social").animate({ opacity: "0" }, 400, function() { $(this).css("display", "none"); });
      $(".contact-box").animate({ opacity: "0" }, 400, function() {
        $(this).css("display", "none"); ($('#header').css("height", "30px")).css("padding", "0px");
        // logo
        ($('#sticky-contact').css("display", "block")).animate({opacity: 1.0});
        $("a[href*=logo-sticky]").animate({opacity: 1.0});
      });
    } else {
      $('#dropdown-navwrap .dropdown-bar').animate({ width: "100%", overflow: "visible" }, 400);

      $('#hdr-logo').animate({ opacity: "1" }, 400, function() { $(this).css("display", "visible"); });
      $("#hdr-social").animate({ opacity: "1" }, 400, function() { $(this).css("display", "visible"); });
      $(".contact-box").animate({ opacity: "1" }, 400, function() {
        $(this).css("display", "visible"); ($('#header').css("height", "95px")).css("padding", "15px 0");
        // logo
        ($('#sticky-contact').animate({opacity: 0})).css("display", "none");
        $("a[href*=logo-sticky]").animate({opacity: 0});
      });
    }
  });
</script>

Answer 1

它应该是这样的：

<script>
var elementPosition = $('#main-wrap').offset();
var x = 0;
var top = false;

$(window).scroll(function() {
    if ($(window).scrollTop() > elementPosition.top && x != 0) {
        if (top == false) {
            $('#dropdown-navwrap .dropdown-bar').animate({width: "80%", overflow: "visible"}, 400);
            $('#header').animate({top: "44px"}, 400, function () {
                $(this).animate("padding", "0");
            });

            $('#hdr-logo').animate({opacity: "0"}, 400, function () {
                $(this).css("display", "none");
            });
            $("#hdr-social").animate({opacity: "0"}, 400, function () {
                $(this).css("display", "none");
            });
            $(".contact-box").animate({opacity: "0"}, 400, function () {
                $(this).css("display", "none");
                $('#header').css("height", "30px").css("padding", "0px");
                $('#sticky-contact').css("display", "block").animate({opacity: 1.0});
                $("a[href*=logo-sticky]").animate({opacity: 1.0});
            });
            top = true;
        }
    } else {
        if (top == true) {
            $('#dropdown-navwrap .dropdown-bar').animate({width: "100%", overflow: "visible"}, 400);

            $('#hdr-logo').animate({opacity: "1"}, 400, function () {
                $(this).css("display", "visible");
            });
            $("#hdr-social").animate({opacity: "1"}, 400, function () {
                $(this).css("display", "visible");
            });
            $(".contact-box").animate({opacity: "1"}, 400, function () {
                $(this).css("display", "visible");
                $('#header').css("height", "95px").css("padding", "15px 0");
                $('#sticky-contact').animate({opacity: 0}).css("display", "none");
                $("a[href*=logo-sticky]").animate({opacity: 0});
            });
            top = false;
        }
    }
});
</script>

我无法测试它，因为我没有你的HTML。但是，目的是防止功能在向下滚动或向上滚动时触发两次。

如果我们将变量top设置为false，我们将第一次让该功能在向下滚动时触发。然后，在点火之后我们设置为true，所以如果我们继续向下滚动，该功能将无法执行任何操作。滚动顶部时会发生相同的情况。

在滚动动画标题，发射太多次

1 个答案: