Как сделать плавное исчезновение панели header?

Question

Всем привет делаю новый дизайн для сайта и задался и задался вопросом плавного появления и исчезновения header при прокрутке страницы, появление сделал, а как плавное исчезновение сделать никак не могу понять.

window.onscroll = function showHeader() {
  var header = document.querySelector('.head');
  if (window.pageYOffset > 300) {
    header.classList.add('header-fixed');
  } else {
    header.classList.remove('header-fixed');
  }
}

@keyframes animate-top-menu {
  0% {
    top: -50px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}

@keyframes animate-nonfixed {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: -50px;
    opacity: 0;
  }
}

.menudesc {
  position: absolute;
  width: 100%;
  top: 90px;
}

.header-fixed {
  position: fixed;
  width: 100%;
  top: 0;
  animation: animate-top-menu 1.2s;
  background-color: #044c04;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.nonefixed {
  display: none;
  animation: animate-nonfixed 1.2s;
}

.header-fixed .logo {
  min-width: 73px;
  max-width: 73px;
}

.header-fixed .menudesc {
  position: initial;
}

.header-fixed .non {
  display: none;
}

.header-fixed .non2 {
  display: none;
}

.header-fixed .loginpanel {
  max-width: 110px;
}

#header {
  width: 100%;
  max-width: 1280px;
  height: 80px;
  margin: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 1500px;
  overflow: auto;
  background-color: #faf4f4;
  scrollbar-color: #458245 #714826;
  scrollbar-width: auto
}

.menu {
  text-transform: uppercase;
}

.menu li {
  list-style: none;
}

.menu>li>a {
  display: block;
  padding: 12px;
  color: white;
  text-transform: uppercase;
  border-bottom: 2px solid black;
}

.menu>li>a:hover {
  background-color: grey;
}

.menu .navi {
  display: flex;
  justify-content: space-around;
  background-color: #044c04c2;
  height: 50px;
  align-items: center;
  border-radius: 25px;
  font-weight: 600;
}

.navi a {
  color: rgb(248, 243, 243);
  background-color: #097409c2;
  padding: 10px;
  border-radius: 25px;
}

.navi a:hover {
  background-color: #065206c2;
}

<!DOCTYPE html>
<html lang="ru" prefix="og: http://ogp.me/ns#" prefix="ya: https://webmaster.yandex.ru/vocabularies/">

<head>
  <meta charset="UTF-8">

</head>

<body>



  <header class="head ">
    <div id="header">
      <a href="/" class="logo"></a>

      <button data-btn="search" class="search" title="Поиск по сайту"><i class="fa fa-search fasearch"></i></button>
      <div class="menudesc">
        <div class="accordion__item">
          <nav class="menu mobilmenu" rel="Главное меню">
            <ul class="navi ">
              <li class="accordion__item noaccordion "><a href="/zagotovki">Заготовки</a></li>
              <li class="accordion__item noaccordion "><a href="/2bluda">Вторые блюда</a></li>
              <li class="accordion__item noaccordion "><a href="/salat">Салаты</a></li>
              <li class="accordion__item noaccordion "><a href="/soap">Супы</a></li>
              <li class="accordion__item noaccordion "><a href="/napitki">Напитки</a></li>
              <li class="accordion__item noaccordion "><a href="/zakuski">Закуски</a></li>
            </ul>
          </nav>
        </div>
      </div>

      <div data-window="search" class="modal1">
        <div class="modal_search animate-top">
          <div class="searchForm">
            <form onsubmit="this.sfSbm.disabled=true" action="" name="searchform" method="post" style="margin:0">
              <input type="hidden" name="do" value="search" />
              <input type="hidden" name="subaction" value="search" />
              <div class="schQuery"><input type="text" id="story" name="story" maxlength="550" size="20" placeholder="Поиск по сайту..." class="queryField" /></div>
              <div class="schBtn"><button type="submit" class="searchSbmFl" name="sfSbm"><i
                                  class="fa fa-search "></i></button></div>
            </form>
          </div>
          <div class="close close_big">&times;</div>
        </div>
      </div>
      {login}
      <input class="side-menu" type="checkbox" id="side-menu" />
      <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>

    </div>

  </header>




</body>

</html>

Answer 1

Короче примерно так. У вас не работало, так как стили были на .header-fixed, но он убирался, когда меньше 300px по высоте, а следовательно просто убирались стили для него, вот он и исчезал быстро.

window.onscroll = function showHeader() {
  var header = document.querySelector('.head');
  if (window.pageYOffset > 300) {
    header.classList.add('header-fixed');
    header.classList.remove('nonefixed');
    header.style.position = 'fixed';
  } else if (window.pageYOffset < 100) {
    header.style.position = 'static';
    header.classList.remove('nonefixed');
  } else if (window.pageYOffset < 300) {
    header.classList.add('nonefixed');
    header.classList.remove('header-fixed');
  }
}

@keyframes animate-top-menu {
  0% {
    top: -50px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}

@keyframes animate-nonfixed {
  0% {
    opacity: 1;
    top: 0;
  }
  100% {
    top: -50px;
    opacity: 0;
  }
}

.menudesc {
  position: absolute;
  width: 100%;
  top: 90px;
}
.head {
  width: 100%;
}
.header-fixed {
  top: 0;
  animation: animate-top-menu 1.2s forwards;
  background-color: #044c04;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.nonefixed {
  top: 0;
  opacity: 1;
  background-color: #044c04;
  animation: animate-nonfixed 1.2s forwards;
}

.header-fixed .logo {
  min-width: 73px;
  max-width: 73px;
}

.header-fixed .menudesc, .nonefixed .menudesc {
  position: initial;
}

.header-fixed .non {
  display: none;
}

.header-fixed .non2 {
  display: none;
}

.header-fixed .loginpanel {
  max-width: 110px;
}

#header {
  width: 100%;
  max-width: 1280px;
  height: 80px;
  margin: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 1500px;
  overflow: auto;
  background-color: #faf4f4;
  scrollbar-color: #458245 #714826;
  scrollbar-width: auto
}

.menu {
  text-transform: uppercase;
}

.menu li {
  list-style: none;
}

.menu>li>a {
  display: block;
  padding: 12px;
  color: white;
  text-transform: uppercase;
  border-bottom: 2px solid black;
}

.menu>li>a:hover {
  background-color: grey;
}

.menu .navi {
  display: flex;
  justify-content: space-around;
  background-color: #044c04c2;
  height: 50px;
  align-items: center;
  border-radius: 25px;
  font-weight: 600;
}

.navi a {
  color: rgb(248, 243, 243);
  background-color: #097409c2;
  padding: 10px;
  border-radius: 25px;
}

.navi a:hover {
  background-color: #065206c2;
}

<!DOCTYPE html>
<html lang="ru" prefix="og: http://ogp.me/ns#" prefix="ya: https://webmaster.yandex.ru/vocabularies/">

<head>
  <meta charset="UTF-8">

</head>

<body>



  <header class="head ">
    <div id="header">
      <a href="/" class="logo"></a>

      <button data-btn="search" class="search" title="Поиск по сайту"><i class="fa fa-search fasearch"></i></button>
      <div class="menudesc">
        <div class="accordion__item">
          <nav class="menu mobilmenu" rel="Главное меню">
            <ul class="navi ">
              <li class="accordion__item noaccordion "><a href="/zagotovki">Заготовки</a></li>
              <li class="accordion__item noaccordion "><a href="/2bluda">Вторые блюда</a></li>
              <li class="accordion__item noaccordion "><a href="/salat">Салаты</a></li>
              <li class="accordion__item noaccordion "><a href="/soap">Супы</a></li>
              <li class="accordion__item noaccordion "><a href="/napitki">Напитки</a></li>
              <li class="accordion__item noaccordion "><a href="/zakuski">Закуски</a></li>
            </ul>
          </nav>
        </div>
      </div>

      <div data-window="search" class="modal1">
        <div class="modal_search animate-top">
          <div class="searchForm">
            <form onsubmit="this.sfSbm.disabled=true" action="" name="searchform" method="post" style="margin:0">
              <input type="hidden" name="do" value="search" />
              <input type="hidden" name="subaction" value="search" />
              <div class="schQuery"><input type="text" id="story" name="story" maxlength="550" size="20" placeholder="Поиск по сайту..." class="queryField" /></div>
              <div class="schBtn"><button type="submit" class="searchSbmFl" name="sfSbm"><i
                                  class="fa fa-search "></i></button></div>
            </form>
          </div>
          <div class="close close_big">&times;</div>
        </div>
      </div>
      {login}
      <input class="side-menu" type="checkbox" id="side-menu" />
      <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>

    </div>

  </header>




</body>

</html>

БЛОГ НА HUSL

Как сделать плавное исчезновение панели header?

Ответы (1 шт):