Анимация меню навигации с добавлением / удалением класса - PullRequest
Новая
       7

Анимация меню навигации с добавлением / удалением класса

0 голосов
/ 27 мая 2018

Я новичок в JS / jQuery, и я впервые анимирую панель навигации.
После изучения функций addClass / removeClass я получил следующую задачу.
Я не получаю его для fadeIn / fadeOut элементов addClass / removeClass.
Может быть, кто-то может мне помочь: -) 

    $(window).scroll(function(){                          
        if ($(this).scrollTop() > 80) {
            $('.navbar').removeClass('.navbar').addClass("navbar-alt").fadeIn(500);
            $('.logo-ate').removeClass('.logo-ate').addClass("logo-ate-alt");
            $('.links').removeClass('.links').addClass("links-alt");
            $('.menu').removeClass('.menu').addClass("menu-alt");
        } else {
            $('.navbar').removeClass("navbar-alt").addClass('.navbar').fadeOut(500);
            $('.logo-ate').removeClass("logo-ate-alt").addClass('.logo-ate');
            $('.links').removeClass("links-alt").addClass('.links');
            $('.menu').removeClass("menu-alt").addClass('.menu');
        }
    });
});

Я использовал removeClass / addClass, потому что я хотел изменить цвета / изображения в меню при прокрутке.Меню навигации, над которым я работаю, должно выглядеть так: https://www.piccola -koeln.de /
У меня все работает, кроме fadeIn / fadeOut.

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Прежде всего я должен сказать, что событие прокрутки - это быстро повторяющееся событие, когда пользователь использует колесико мыши или сенсорный слайд, поэтому вам не следует часто добавлять и удалять классы, не имеющие значения для каждого события прокрутки!Поэтому я добавил критерий в дополнение к позиции прокрутки, которая проверяет, был ли ранее установлен класс navbar или navbar-alt.

Для эффекта исчезновения цвета нет необходимости добавлять отдельный блок.Вы можете использовать CSS-переходы, чтобы при изменении класса стили отображались с помощью CSS-эффектов: 

$(window).scroll(function(){                          
        if ( $(this).scrollTop() > 80 &&  $('.navbar').hasClass("navbar") ) {
            $('.navbar').removeClass('.navbar').addClass("navbar-alt");
            $('.logo-ate').removeClass('.logo-ate').addClass("logo-ate-alt");
            $('.links').removeClass('.links').addClass("links-alt");
            $('.menu').removeClass('.menu').addClass("menu-alt");
        }

        if ( $(this).scrollTop() <= 80 &&  $('.navbar').hasClass("navbar-alt") ){
            $('.navbar').removeClass("navbar-alt").addClass('.navbar');
            $('.logo-ate').removeClass("logo-ate-alt").addClass('.logo-ate');
            $('.links').removeClass("links-alt").addClass('.links');
            $('.menu').removeClass("menu-alt").addClass('.menu');
        }
    });
.navbar {
  height:80px;
  background-color:#666666;
  position:fixed;
  top:0;left:0;
  width:100%;
  transition: background-color 1s ease;
}

.navbar-alt{
  height:80px;
  background-color:#00ff00;
  position:fixed;
  top:0;left:0;
  width:100%;
  transition: background-color 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">&nbsp;</div>
scroll down<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
scroll down<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
scroll down<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
scroll down<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
scroll down<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
scroll down<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
Now scroll up!<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
0 голосов
/ 27 мая 2018

Я попытался еще немного и нашел решение: 

.colorfade {
  height:100px;
  width: 100%;
  position: absolute;
  background-color: white;
  position: fixed;
  display: none;
  z-index: -1;
}


    $(window).scroll(function(){                          
        if ($(this).scrollTop() > 80) {
            $('.navbar').removeClass('.navbar').addClass("navbar-alt");
            $('.logo-ate').removeClass('.logo-ate').addClass("logo-ate-alt");
            $('.links').removeClass('.links').addClass("links-alt");
            $('.menu').removeClass('.menu').addClass("menu-alt");
            $('.colorfade').fadeIn(500);
        } else {
            $('.navbar').removeClass("navbar-alt").addClass('.navbar').fadeIn(500);
            $('.logo-ate').removeClass("logo-ate-alt").addClass('.logo-ate');
            $('.links').removeClass("links-alt").addClass('.links');
            $('.menu').removeClass("menu-alt").addClass('.menu');
            $('.colorfade').fadeOut(500);
        }
    });
});
...