4

Доброго времени суток всем.

Подскажите, как при скроллинге страницы вверх сделать плавное исчезание навигации? Плавное появление при прокрутке вниз работает корректно.

Код на JSFiddle

$(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>

1 ответ 1

3

Поскольку вы 1 элемент делаете плавающим (float), он освобождает занимаемые 60px, и на это место сдвигается весь контент. Этого легко избежать: добавьте эти исчезающие 60px, например, в виде отступа (margin):

.fixed + .navigation-header {
  margin-top:60px;
}

https://jsfiddle.net/7yzomo12/2/

Можно при приближении к верху страницы уменьшать top, чтобы скрывать элемент:

  $(".header").css({ 
      top: Math.min(0,$(this).scrollTop() - $(".header").height()*2) 
  })

https://jsfiddle.net/7yzomo12/3/

1
  • спасибо за помощь
    – GilB Ert
    7 фев 2017 в 19:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.