Доброго времени суток всем.
Подскажите, как при скроллинге страницы вверх сделать плавное исчезание навигации? Плавное появление при прокрутке вниз работает корректно.
$(function () {
$(window).scroll(function(event) {
if($(this).scrollTop() >= $(".header").height()) {
$(".header").addClass('fixed');
}
else {
$(".header").removeClass('fixed');
}
});
});
* {
margin:0;
paddong:0;
}
a {
text-decoration: none;
color: #fff;
font-size:17px;
}
ul {
list-style: none;
}
/* ШАПКА */
.header {
background: #66b34e;
top: -50px;
transition: 0.7s ease;
}
.fixed {
position: fixed;
z-index: 10;
width: 100%;
top:0;
}
.container {
max-width: 1240px;
margin: 0 auto;
padding: 0px 20px 0 20px;
}
.navigation-header {
background: hsla(14, 1%, 5%, 0.83);
-webkit-box-shadow: 0 9px 9px 0 rgba(0,0,0,.15);
box-shadow: 0 9px 9px 0 rgba(0,0,0,.15);
letter-spacing: 1px;
color: #fff;
}
.user-links {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.head-links {
display: flex;
justify-content: flex-end;
}
.head-links a {
padding: 20px 15px;
display: flex;
flex-grow: 1;
justify-content: center;
}
.head-links a:hover:first-child{
background-color: #69c34d;
transition: all .3s
}
/* НАВИГАЦИЯ */
.logo img {
height: 70px;
margin: 10px 0;
}
.container-head {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.logo {
flex-grow: 1;
}
.menu {
justify-content: space-around;
list-style-type: none;
flex-grow: 1;
}
.menu ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: 19px;
}
.menu-list a:after {
display: block;
content: "";
border-bottom: 3px solid;
width: 0%;
transition: width .3s ease-in-out;
}
.menu-list a:hover:after{
width: 100%;
}
@media (max-width : 764px) {
.list-items {
justify-content: center;
}
.fixed {
display: none;
}
.menu ul {
flex-wrap: wrap;
}
.menu a {
display: block;
text-align: center;
font-size: 22px;
padding: 10px;
}
.menu ul li {
width: 100%;
}
.menu>ul>li:hover {
border-bottom: none;
}
.menu ul li:hover > ul {
display: flex;
position: relative;
flex-direction: inherit;
width: 100%;
}
.menu-list a:after {
border-bottom: 0;
}
.menu-list a:hover {
background: #424242;
transition: all .3s;
}
.logo {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-wrapper">
<header class="header">
<div class="container">
<div class="head-links">
<div class="user-links">
<a href="#"><span class="d_underline"> User</span></a>
<a href="#"><span class="cart"> Cart</span></a>
</div>
</div>
</div>
</header>
<div class="navigation-header">
<div class="container">
<div class="container-head">
<div class="logo">
<a href=""><img src="https://ekipazh-service.com.ua/files/images/all_brands.png"></a>
</div>
<div class="menu">
<nav class="menu-list">
<ul>
<li><a href="">Главная</a></li>
<li><a href="">Как заказать</a></li>
<li><a href="">Способы оплаты</a></li>
<li><a href="">Контакты</a></li>
<li><a href="">О нас</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="main">
<div class="container">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dignissimos quia voluptates sed tempora vero beatae provident inventore, ipsa qui laborum voluptatibus odit, repellat, molestias ullam quas, voluptatum illo dolore!</div>
<div>Suscipit harum sint quia provident, accusantium nostrum laborum reprehenderit totam dolorum? Soluta maxime ipsum voluptate rerum impedit, vero minima ratione repellat necessitatibus repellendus, iste nihil porro totam enim illum molestias.</div>
<div>Incidunt enim sapiente distinctio ipsa, harum dignissimos explicabo, ipsum consequuntur amet eveniet veritatis fugiat nam. Vitae sed nihil aspernatur, rerum minima deserunt! Consectetur non est quasi labore eum ut adipisci.</div>
<div>Doloremque tenetur officia eligendi laudantium, aliquam in. Optio saepe velit necessitatibus libero, porro ex. Quidem similique est doloribus hic, magnam error voluptatibus facilis quasi laborum obcaecati dignissimos eius numquam distinctio.</div>
<div>At asperiores excepturi qui, odio, mollitia iure deleniti voluptate recusandae, odit totam beatae fugit sit incidunt earum aperiam omnis vero, magnam itaque. Doloremque harum ullam similique explicabo recusandae asperiores culpa.</div>
<div>Neque, at quam porro voluptatum nemo nesciunt aliquam, adipisci placeat eveniet. Voluptatem rem, minus. Illum, obcaecati placeat iure laboriosam inventore fugit harum, ea alias praesentium consectetur repudiandae perspiciatis, cumque perferendis.</div>
<div>Quidem dolore sapiente pariatur, nulla sunt blanditiis labore exercitationem voluptatibus deleniti, doloribus quis harum voluptatum fugit, illum cupiditate. Asperiores expedita incidunt nemo qui alias, quibusdam harum pariatur ipsam molestiae non!</div>
<div>Similique saepe doloremque libero, pariatur provident ea itaque necessitatibus repudiandae eum rem ex, vitae praesentium et, ducimus accusantium. Facilis nesciunt sed consequuntur quaerat eveniet a facere dolorum numquam voluptas perspiciatis.</div>
<div>Ea laborum laboriosam rerum ut nulla. Esse, dolorem. Itaque possimus aperiam cum vel, culpa sunt numquam beatae amet nulla sit illo voluptate eveniet commodi error laudantium ipsam quisquam nemo ipsum.</div>
<div>Ullam dolore temporibus quidem amet sed dicta sunt natus nisi, eaque eum ut voluptate dolor voluptatem unde. Commodi praesentium id veniam voluptates dolorum suscipit vero. Repellendus quas eligendi blanditiis at!</div>
<div>Cum perferendis quidem impedit modi debitis, ratione corporis. Hic corporis expedita totam culpa saepe magni blanditiis. Consectetur eaque ex repudiandae, est, libero quam in. Nulla voluptatem culpa alias voluptate, ut.</div>
<div>Amet nulla recusandae optio natus, minima, minus modi pariatur maiores expedita enim adipisci praesentium consectetur explicabo aut quod voluptates tenetur quia fuga odit quis dolorem! Quae, quia, reiciendis. Delectus, quo!</div>
<div>Neque natus doloremque recusandae libero asperiores deserunt quam tenetur enim ipsam a. Voluptates omnis dolor in velit a iure, hic culpa eveniet itaque praesentium animi architecto maiores obcaecati, totam, voluptatem!</div>
<div>A illo recusandae porro, ad, sed ducimus ipsum cum sint earum ullam fugiat est vitae quisquam facilis aperiam laudantium aut nisi aliquam aliquid deserunt eligendi perspiciatis! Praesentium vitae, recusandae sint?</div>
<div>Rem libero, facilis voluptas assumenda nisi incidunt commodi dolores. Quam molestiae similique sint vero ea sit, deserunt rem sed, aspernatur pariatur voluptatum inventore tempora quisquam debitis, reprehenderit vitae, saepe alias.</div>
<div>Possimus eveniet laborum, reiciendis soluta rem necessitatibus ex quidem, totam fuga similique numquam dolore id corrupti aperiam. Iure, aliquam dignissimos possimus expedita reprehenderit, et quaerat molestiae libero soluta commodi voluptatibus.</div>
<div>Tempore delectus omnis quaerat perspiciatis vel! Quia blanditiis dolores ad, dolore doloremque ratione laudantium maiores harum debitis magni, tenetur, eum optio officiis ducimus adipisci reprehenderit veniam nostrum ab voluptatem ex.</div>
<div>Quia debitis mollitia voluptas nostrum ipsum dignissimos repellendus iusto ducimus. Blanditiis neque perspiciatis asperiores possimus alias, amet iusto itaque. Saepe doloremque molestias tenetur, aperiam repellat molestiae excepturi nobis dolor, voluptas!</div>
<div>Reprehenderit quasi dolor harum quibusdam sapiente labore non maxime, est quod fugiat consequatur nesciunt perspiciatis cupiditate autem quas! Delectus quae quis quaerat alias consequuntur facilis earum, nulla et ab ratione!</div>
<div>Temporibus explicabo doloremque facere officia, omnis. Dolor saepe veritatis, magnam ducimus. Laudantium nobis eum vel, ipsum consequatur saepe maiores perspiciatis obcaecati, illum deserunt vero nisi. A, quo obcaecati aperiam libero.</div>
<div>Ad omnis repellat suscipit. Quos alias minus saepe cupiditate a ipsam tempore numquam vel, nulla earum fugit labore. Fugiat provident vero libero dignissimos reprehenderit doloribus voluptatibus dolor voluptate dolorum asperiores.</div>
<div>Iste id, placeat! Reiciendis sit doloremque consectetur modi ducimus perferendis tempora ea eius, dolores in nostrum unde consequatur aliquid, nobis consequuntur ullam minima nulla alias eos animi ab blanditiis aperiam.</div>
<div>Dicta, ipsam! Sit quisquam, nostrum optio. Accusantium eum id soluta, harum molestiae explicabo! Amet est, distinctio ipsam rerum deleniti eaque quidem fuga impedit nobis in, minima blanditiis, sit a voluptas.</div>
<div>Aliquam minima a fugiat nam nulla distinctio sint, vitae laudantium consequatur blanditiis adipisci, velit omnis non voluptate pariatur beatae enim possimus sapiente porro architecto, asperiores quia nostrum corporis aspernatur. Suscipit.</div>
<div>Perferendis repellendus aut architecto, libero repudiandae nobis neque exercitationem sunt veritatis, quibusdam, numquam eaque doloribus animi tempore obcaecati maiores praesentium! Quidem error quo nam quaerat ullam necessitatibus doloribus aperiam repellendus.</div>
<div>In provident quasi, nesciunt modi enim distinctio minima ipsa tempore ipsum. Culpa architecto nulla iusto, commodi quaerat quia veritatis aut ratione voluptatibus necessitatibus mollitia deleniti adipisci, neque odio illum deserunt.</div>
<div>Fuga atque sapiente sit voluptatum voluptatibus, at laudantium! Nam veritatis libero dolorem sapiente accusamus dolores iste maiores voluptates adipisci omnis reprehenderit autem totam labore, amet quos perspiciatis, consequatur cumque est.</div>
<div>Aut quo molestiae sit dicta magnam temporibus, nihil officia. Voluptate perspiciatis, voluptas modi, necessitatibus recusandae corrupti corporis sint, expedita consectetur, repudiandae quam ab mollitia eum porro similique unde nihil cumque.</div>
<div>Eaque atque dolorum cum reiciendis, quisquam dolore tempora numquam nesciunt dolores enim! Voluptates suscipit, quas laudantium ex nesciunt consectetur libero eos itaque, officiis minus beatae quasi possimus excepturi velit impedit.</div>
<div>Reiciendis libero quod consequuntur, neque accusamus possimus ut ullam quisquam alias in, architecto unde. Porro non provident repellat quibusdam dignissimos expedita, corporis atque, reprehenderit magni accusantium! Magnam ducimus, esse officiis!</div>
<div>Sunt numquam dolores eligendi odio asperiores modi voluptate fugit, deleniti pariatur, iure dignissimos facilis illo saepe nisi temporibus alias magnam voluptatem neque voluptatum soluta sed possimus dicta labore ipsa. Itaque!</div>
<div>Facere incidunt harum voluptatibus sed, voluptatem repellat. Praesentium repellendus dolorum ducimus? Voluptates repudiandae enim neque quasi nam. Fugit assumenda iste tenetur, numquam, quis pariatur repellat, reiciendis enim libero, eveniet commodi.</div>
<div>Aliquam officiis, qui sapiente aut. Nesciunt, ad sequi nobis harum, voluptates nulla, aliquid rem nostrum deleniti facere neque doloribus similique nemo mollitia commodi veritatis! Voluptatem ex eum blanditiis similique, corrupti?</div>
<div>Eligendi veritatis non nam voluptate autem! Eaque ad obcaecati, eius, quidem tempora, soluta maxime consectetur quam itaque illo, odit. Repudiandae pariatur doloribus, rerum. Sunt rem rerum aperiam voluptates neque beatae?</div>
<div>Molestiae vitae provident nihil, ipsum suscipit rerum atque nemo ab voluptatibus beatae, repudiandae voluptates quas consequuntur eius? Quod culpa beatae corrupti, possimus similique saepe deleniti, eaque totam nemo enim cupiditate.</div>
</div>
</div>
</div>