Анимация заголовка на прокрутке, запуск слишком много раз

как я могу остановить эти 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>

1 ответ

  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, так что если мы продолжим прокрутку вниз функция ничего не будет делать. Произойдет то же самое при прокрутке сверху.