Моя навигационная панель имеет функцию, которая, когда вы слегка прокручиваете, навигационная панель становится меньше. Я также добавил lo go, который изменяется при прокрутке. Но во время смены анимации при прокрутке страницы вверх, на экране появляются некоторые очень неприятные мерцания. Я считаю, что это проблема с моим JS. Не могли бы вы взглянуть и рассказать, что вы испытываете? Спасибо.
$(document).on("scroll", function() {
if ($(document).scrollTop() > 2) {
$('.miniBanner').addClass('show')
$('.logoBanner').addClass('hide')
$("header").addClass("shrink")
$("header").removeClass("grow")
} else {
$('.miniBanner').removeClass('show')
$('.logoBanner').removeClass('hide')
$("header").removeClass("shrink");
$("header").addClass("grow")
}
});
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
header {
width: 100%;
padding: 30px 0px;
/* revert to 50px 0px if we want the scroll animation */
/*animation magic*/
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
z-index: 9999;
top: 0;
position: sticky;
margin: 0;
background-color: white;
box-shadow: 1px 1px 16px 2px red;
}
.shrink {
padding: 10px 0;
box-shadow: 1px 1px 16px 2px #0000a0;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
visibility: visible;
opacity: 1;
}
.grow {
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
header.shrink .logoBanner {
width: 8vw;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
header.grow .logoBanner {
width: 100vw;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
.miniBanner {
display: none;
visibility: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
.miniBanner.show {
display: flex;
transition: all 0.4s ease-in-out;
visibility: visible;
opacity: 1;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
width: 5vw
}
.logoBanner.hide {
visibility: hidden;
opacity: 0;
display: none;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
list-style: none;
width: 90%;
padding: 0;
margin: 0;
}
a {
width: 80px;
display: block;
margin: 5px;
border-radius: 15px;
padding-top: 5px;
}
li {
justify-content: center;
text-align: center;
}
li a {
background-color: white;
text-decoration: none;
color: #0000a0;
}
.logo {
/* brand guidelines */
display: flex;
justify-content: flex-start;
margin-right: 70%;
justify-content: center;
align-items: center;
}
.logoBanner {
width: 250vw;
background-color: white
}
.page {
height: 200vh;
width: 100vw;
}
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.min.js"></script>
</script>
<body>
<header>
<ul>
<a href="#" class="logo">
<img class='logoBanner' src="https://2.bp.blogspot.com/_ORzF0-MDB50/TUI5aoTbDrI/AAAAAAAAEy0/kVSBqTuv1N0/s1600/bufforphington.jpg" alt="">
<img class='miniBanner' src="https://www.almanac.com/sites/default/files/users/AlmanacStaffArchive/hatching-raising-chicken-chicks_full_width.jpg" alt="">
</a>
<li><a href="#">Portal</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Logout</a></li>
</ul>
</header>
<div class=page></div>
</body>