<div class="wrapper">
      <!-- HEADER -->
      <header class="header" id="header">
        <div class="container">
          <div class="header__box">
            <!-- HEADER TOP -->
            <div class="header__top">
              <div class="top__logo">
                h<span>o</span>t <br />
                hairstyles
              </div>
              <div class="top__direction">
                <div class="direction__dir">
                  Direction: <span>21 Orleans St SE Apt 4</span>
                </div>
                <div class="direction__number">
                  Number:
                  <a href="#" class="direction__number-href"
                    ><span>+7 (777) 544-9889</span></a
                  >
                </div>
              </div>
            </div>
            <div class="header__burger">
              <span></span>
            </div>
          </div>
        </div>
        <!-- HEADER NAV-->
        <nav class="heaeder__items">
          <div class="container">
            <div class="header__box">
              <ul class="header__list">
                <li class="header__item">
                  <a href="#" class="header__item-href">HOME</a>
                </li>
                <li class="header__item">
                  <a href="#" class="header__item-href">ABOUT US</a>
                </li>
                <li class="header__item">
                  <a href="#" class="header__item-href">PRODUCTS & SERVICES</a>
                </li>
                <li class="header__item">
                  <a href="#" class="header__item-href">PROJECT GALLERY</a>
                </li>
                <li class="header__item">
                  <a href="#" class="header__item-href">CONTACTS</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </header>
      <!-- MAIN -->
      <main class="main">
        <div class="container">
          <div class="main__box">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis
            maxime odio in architecto beatae. Voluptates saepe distinctio non
            voluptas quaerat nulla sunt impedit molestias, eum odit, ea magni
            temporibus dolor autem aut similique pariatur dolorem corrupti.
            Inventore illum debitis dolor molestias suscipit perspiciatis.
            Nesciunt molestias sed qui. Ducimus nemo iure aliquid porro
            consequatur dolor eos culpa quod illum tempore eveniet assumenda
            quam distinctio reprehenderit commodi, enim officiis quos tempora
            ipsa laudantium id. Vel repudiandae iusto repellat voluptate quia
            dignissimos accusantium laborum dolores. Dolor accusamus dolorum
            aliquam quasi quos adipisci, doloribus soluta excepturi deserunt
            dolore provident odio libero fuga, rerum unde minima ipsa nam nihil
            praesentium maxime illum? Rem, fugit id, veniam consequuntur nulla
            reiciendis consectetur dignissimos modi maxime ducimus explicabo
            aspernatur aut eligendi aperiam voluptas dolor dolores a odio labore
            mollitia. Id explicabo dolor aperiam illo assumenda facilis porro
            expedita libero sapiente neque quia optio vitae cum odio vel totam
            sequi voluptates iste, asperiores nihil doloremque dignissimos. Iste
            quidem nisi ea, necessitatibus officia doloremque porro sequi odio
            laborum quos itaque nobis pariatur, voluptatem quasi blanditiis eum
            ipsam quas aliquam placeat, quibusdam omnis cupiditate maxime
            voluptatum unde. Ipsum sapiente voluptatum possimus optio odio
            veniam ab impedit, quisquam earum ea exercitationem animi minima,
            maiores voluptatibus veritatis iste! Amet quia corporis cumque saepe
            quaerat neque ipsum dolor in. Beatae voluptatem, aperiam
            perspiciatis nisi ut recusandae dolorum iste eligendi adipisci quasi
            odio impedit a rem mollitia maxime. Non aliquid architecto ad,
            necessitatibus modi in omnis explicabo ipsa maiores voluptatem? Enim
            excepturi mollitia numquam rerum unde quas voluptatem quam sed,
            ipsum similique suscipit asperiores aut quae, veritatis, eligendi
            repudiandae labore eius at nulla. Delectus enim sit saepe nisi,
            minima ea error eos odio dicta assumenda, sint deserunt corporis
            maiores illum doloremque eum unde quibusdam modi? Voluptates
            suscipit temporibus ad eos adipisci doloribus dolore reiciendis ut
            enim autem! Totam, excepturi dicta! Qui voluptates modi odio
            laboriosam magnam id tempore ratione animi ipsam laborum enim eius,
            praesentium dignissimos aliquid eligendi, numquam voluptatem quae
            ullam. Deleniti illum, nemo hic natus aliquam velit similique
            voluptatum maxime quo ipsum tenetur error iure corporis enim,
            laborum aliquid distinctio amet assumenda voluptatem culpa quia?
            Asperiores saepe praesentium velit natus unde nemo libero
            consequuntur id, ab eaque nihil consectetur accusamus iusto enim sit
            a excepturi qui neque impedit vero sunt pariatur! Delectus
            aspernatur, laboriosam facilis soluta nisi a dignissimos! Quibusdam
            deleniti accusamus laborum veniam possimus error enim totam non quis
            nihil, assumenda molestias minima qui maiores dolores fugit iusto ex
            perferendis magni eos. Dolorum vel fugit totam expedita consequatur
            tempora quisquam perferendis quo sapiente consequuntur, doloremque
            repudiandae veniam dignissimos fuga dicta praesentium illo esse ab
            architecto rem, porro ad est temporibus! Vitae ipsum magni commodi
            expedita, eveniet suscipit. Nobis earum, iure ipsa odit impedit
            eaque at tenetur velit ipsum minus totam, a et deleniti voluptate.
            Sapiente quae pariatur, a, accusantium velit atque provident
            voluptate dignissimos veritatis impedit qui! Nemo itaque est ab ad
            nihil non amet consequuntur optio accusamus enim totam qui molestias
            natus, nostrum odio, earum aperiam. Fugit rerum molestias debitis.
            Optio iure enim autem voluptatem voluptatibus blanditiis doloremque!
            Placeat repellendus quasi ad suscipit animi! Voluptatibus
            repudiandae delectus totam. Repudiandae fugit dolorum illo
            voluptatem maiores illum, nobis consequuntur quam unde. Illo
            assumenda voluptas atque nisi laboriosam itaque eveniet consequatur
            sequi deleniti maiores, nulla cum commodi illum voluptatem aperiam?
            Voluptatibus dolorem fuga doloribus, nostrum, aut vitae, enim iste
            voluptate officia excepturi eum dolorum facilis sunt reiciendis
            omnis cum quas cumque expedita hic. Vero aliquam quia sit harum
            corporis aperiam incidunt cum iste, blanditiis, quod optio delectus
            ad iure saepe deleniti sunt reiciendis dicta fugit quos temporibus
            accusamus exercitationem maiores numquam dolores. Illo obcaecati aut
            nostrum corporis eos nobis nemo perferendis dolorem dignissimos!
            Delectus molestiae, exercitationem tempora ratione necessitatibus
            laboriosam perspiciatis? Asperiores incidunt enim in repudiandae
            assumenda aspernatur labore esse quidem, magnam consequuntur,
            corrupti fuga provident perferendis vitae, laudantium ipsa unde nisi
            culpa voluptates dolorem amet. Aspernatur, non sunt iure cumque in
            sint quibusdam, sed eos excepturi eveniet iste ipsa obcaecati
            suscipit autem beatae eius neque nostrum modi recusandae commodi
            officia reiciendis? Doloremque harum quibusdam distinctio
            consequatur ratione pariatur voluptas perferendis suscipit enim
            incidunt dignissimos, vitae vero a voluptate ut quos eaque officiis
            eum. Rem incidunt sapiente fuga consequuntur perferendis, blanditiis
            quod exercitationem aliquid praesentium, dolor tempora explicabo
            cupiditate laborum obcaecati facilis repudiandae sunt veritatis
            adipisci? Enim similique ad ex sunt a, maxime, omnis quasi ratione
            recusandae dicta dolores harum in adipisci sint minus impedit
            provident exercitationem excepturi alias sapiente accusamus. Quae
            ducimus dicta excepturi ea quisquam fugit quo recusandae
            repellendus, libero neque beatae rem, odio nulla quos deleniti modi
            non atque sint hic nostrum culpa iusto voluptas, accusantium
            tenetur. Illum optio, voluptatibus iusto modi nihil cum commodi sed
            aliquam dicta repellat fugit officiis ipsam similique? Rerum, dolore
            ex ipsa blanditiis quibusdam porro expedita unde, sint iste id
            veniam! Dolores amet voluptatibus, ab dolorum saepe ad? In ex iusto,
            nulla corrupti unde vel ratione soluta iste laboriosam, et natus
            sit, minima magnam reiciendis! Labore autem quae, quasi aperiam
            corporis repellendus nobis consequatur quaerat iusto, magni nemo eos
            molestiae accusantium officia tenetur repellat! Repellendus, magni,
            in repudiandae eos officiis, voluptates et incidunt odio similique
            culpa expedita vero aperiam ipsam recusandae autem voluptatem alias
            exercitationem! Tenetur praesentium eligendi repudiandae dignissimos
            officia nesciunt voluptatum quaerat dolorum deserunt, obcaecati
            ipsum laboriosam velit ea dolore, laborum quis similique quae sed?
            Excepturi repellendus dignissimos nisi. Quas officiis saepe tempore
            itaque odio tempora quibusdam assumenda alias aut dolorum impedit,
            quae amet accusantium deleniti similique sapiente nesciunt ab odit
            illo at, rem velit vel! Consequatur suscipit sit, id porro provident
            necessitatibus quis nisi, laborum, odio fuga reprehenderit?
            Explicabo veniam iste dicta neque inventore sapiente ex eaque,
            repudiandae eveniet facilis aperiam pariatur error expedita
            cupiditate nulla dolorum saepe. Culpa quam totam ipsa sed
            consequuntur sint atque laborum repellendus. Sit nisi sunt
            laboriosam magnam eligendi unde porro corporis aut facilis corrupti
            quos repellendus cupiditate, quae ex quidem totam voluptatibus
            debitis saepe atque rerum ducimus architecto qui? Iure beatae
            cupiditate facere tenetur porro fuga nam sint perspiciatis.
            Cupiditate necessitatibus architecto amet officiis ex!
            Exercitationem!
          </div>
        </div>
      </main>
      <!-- FOOTER -->
      <footer class="footer" id="footer">
        <div class="container">
          <div class="footer__box">asdfas</div>
        </div>
      </footer>
    </div>

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-family: 'Saira', sans-serif;
  font-size: 24px;
  font-weight: 400;
}

.container {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 10px;
}



.header {
  flex: 0 0 auto;
}
.header__box {
  position: relative;
  z-index: 2;
}
.header__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 50px 0 150px;
}
.top__logo {
  text-align: center;
  font-size: 48px;
  line-height: 64px;
}

.top__logo span{
  color: #FFD953;
}
.top__direction {
  text-align: left;
  line-height: 64px;
}
.top__direction span {
  font-weight: 500;
}
.direction__number {
}
.direction__number-href {
}
.direction__number-href:hover {
  color: #FFD953;
  transition: 0.2s;
}
.direction__span {
  font-weight: 500;
}

@media (max-width: 799px) {
  .header__box {
    font-size: 20px;
  }
  .header__top {
    display: flex;
    flex-direction: column;
  }
  .top__direction {
    text-align: center;
    margin-top: 50px;
  }
}


.heaeder__items{
  width: 100%;
  height: 100px;  
  position: fixed;
  top: 230px;
  left: 0;
  z-index: 10;
  transform: translateY(0);
}
.heaeder__items.isShown{
  transform: translateY(-230px);
}
.heaeder__items::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #162D27;
}
.header__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;

}
.header__item {

}
.header__item-href {
  color: #fff;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 64px;
}
@media (max-width: 799px) {

}



.main {
  flex: 1 0 auto;
}
.main__box {
}
.footer {
  flex: 0 0 auto;
}
.footer__box {
}

/* Указываем box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Убираем внутренние отступы */
ul[class],
ol[class] {
  padding: 0;
}

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 0;
}

/* Выставляем основные настройки по-умолчанию для body */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] {
  list-style: none;
}

/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a {
  text-decoration: none;
  color: #000;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Упрощаем работу с изображениями */
img {
  max-width: 100%;
  display: block;
}

/* Указываем понятную периодичность в потоке данных у article*/
article > * + * {
  margin-top: 1em;
}

/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select {
  font: inherit;
}

/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

const fixedBar = document.querySelector('.heaeder__items');

const toggleBar = function () {
  let isShown = window.pageYOffset ;
  fixedBar.classList.toggle('isShown', isShown);
}

toggleBar();
window.addEventListener('scroll', toggleBar);