<div class="site">
  <div class="header">
    <div class="header__logo">Logo</div>
    <div class="header__menu">
      <a href="#">link</a>
      <a href="#">link</a>
      <a href="#">link</a>
    </div>
    <div class="header__main-menu">Main menu</div>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod natus fugit vitae aperiam quia? Tempore saepe itaque, qui, explicabo, magnam odio eum repellat quisquam nemo quibusdam quia dolore distinctio veritatis?</p>
    <p>Maxime incidunt odit pariatur molestias illo modi blanditiis dolorum commodi perferendis enim, a quas ea eveniet harum assumenda recusandae distinctio quisquam, ducimus eligendi ratione doloremque earum, nesciunt unde minima. Repellendus.</p>
    <p>Nemo necessitatibus illum, expedita maiores aspernatur porro sint corporis aliquam doloribus. Voluptate iusto fugiat culpa accusamus vitae minima nemo, inventore unde non necessitatibus possimus amet totam voluptatibus in libero velit?</p>
    <p>Ex, sint ducimus tempore ad delectus a dignissimos sunt, repellat repellendus maiores unde est iste, rerum labore mollitia autem vitae perferendis? Quibusdam neque sed modi natus eius at sit repudiandae.</p>
    <p>Quae quo est dolorum? Dolorem repudiandae reprehenderit earum ex suscipit quo totam, veritatis perferendis animi necessitatibus officia laboriosam tempore, ratione incidunt eos, quisquam numquam pariatur ducimus obcaecati nam vero accusantium.</p>
    <p>Alias quos sit minima numquam, fugit vel voluptate assumenda architecto rem adipisci maiores et repudiandae ex. Fugiat, nostrum delectus! Ratione repudiandae fugiat minus dicta, ipsam aut. Laudantium repellat cumque eligendi?</p>
    <p>Debitis mollitia est dolore architecto possimus tempora eius tenetur unde quod. Maiores, maxime rerum beatae amet minus ea dolore optio! Doloremque, labore ex modi ipsam molestias quam non necessitatibus placeat!</p>
    <p>Numquam, sapiente porro quia fuga ab omnis ipsam odit, aliquam dolores cum voluptatum modi explicabo aliquid esse temporibus quaerat sequi. Assumenda amet magni sunt eveniet nostrum asperiores voluptatem, dolores culpa.</p>
    <p>Consequuntur cumque, repudiandae eum quae sapiente, voluptates veritatis neque, aperiam atque eius maiores possimus vel voluptate libero eos. Animi quibusdam non dolorem impedit ratione labore commodi voluptatem, optio ipsa culpa?</p>
    <p>Ab dolorum voluptas ratione similique nihil ex rem. Possimus repellat ipsam aperiam ratione quae enim id eligendi, odit consequatur reprehenderit repellendus minima accusantium nisi voluptatibus, hic, officia totam obcaecati sapiente!</p>
    <p>Officiis consectetur, recusandae voluptate nulla numquam provident exercitationem neque aliquam totam. Quia, adipisci deserunt, obcaecati itaque saepe molestias dignissimos sapiente aspernatur reiciendis excepturi nostrum. Maxime veritatis minima nesciunt possimus suscipit.</p>
    <p>Praesentium ab nesciunt, quo accusantium saepe, tenetur quae veritatis quaerat itaque amet in fuga ad exercitationem dolore debitis omnis tempore repellendus. Voluptas ea sunt tenetur doloremque dolorum cupiditate cum ipsam.</p>
    <p>Ipsam animi ipsum harum qui ratione? Omnis quo quidem distinctio sapiente maxime molestiae officia dolor voluptates repellat iste nobis eos velit commodi, maiores repudiandae repellendus explicabo magnam natus fuga! Impedit!</p>
    <p>Expedita eligendi minus non dignissimos quo modi vel provident facere eveniet unde corporis consequatur cumque neque impedit iure sunt tempore ducimus illum dolorum fugit, quae perferendis earum! Odit, praesentium architecto.</p>
    <p>Doloremque labore nobis omnis, praesentium saepe aliquam repellat quo fuga harum facere. Delectus eaque tempora eveniet officia itaque cum vel. Magnam laborum tenetur eos rerum consectetur blanditiis optio itaque quos.</p>
    <p>Quaerat aliquam commodi nihil quisquam nulla dolor quae porro ipsum temporibus eos tempore voluptatibus consequatur ratione vel dolorem, alias mollitia officiis distinctio explicabo doloremque ad repellendus reprehenderit? Aspernatur, rem! Nesciunt.</p>
    <p>Alias, doloribus? Dolores repudiandae tenetur hic laborum praesentium reprehenderit unde! Neque, quibusdam magni. Quibusdam, autem dolorum? Ex sunt numquam autem itaque, distinctio, modi alias voluptatem voluptatibus, ducimus vel assumenda aperiam!</p>
    <p>Animi cum repellat at soluta ex perspiciatis debitis dolorum aut aspernatur aliquid odit omnis asperiores sit ipsa reprehenderit, deserunt iure eaque quia placeat nisi. Nam tempore eaque est doloribus inventore.</p>
    <p>Modi repellat optio eum minima eos, autem earum, repudiandae incidunt aliquam accusamus sunt, quisquam neque cum libero amet sint esse dolores? Sed cupiditate omnis facilis ab ipsa, commodi debitis accusamus!</p>
    <p>Voluptate possimus ex sunt similique veritatis, consectetur labore molestias iusto, ducimus illum numquam odio aliquam quia rem deserunt fugiat! Cupiditate maiores dignissimos repellat pariatur provident quod error sint cum earum?</p>
    <p>Nisi, nulla aperiam! Deserunt sapiente placeat, rerum amet nisi, enim praesentium minus consectetur ea animi pariatur suscipit ducimus in odit, dolores eius illo? Architecto placeat distinctio voluptatibus quas maxime quo!</p>
    <p>Quam totam, aut ullam delectus facilis, ipsum vero nesciunt et id nemo veritatis nihil explicabo. Repellendus aut, consequatur fugiat iure blanditiis, eum laborum et aliquid dolore, iusto officiis expedita nisi.</p>
    <p>Dolorum sint maiores, voluptas numquam repellat aut voluptatum consectetur quod provident? Reprehenderit quisquam sed placeat voluptatem, aliquam, inventore officiis illo ipsum ratione at sint a unde laudantium repudiandae corrupti eum.</p>
    <p>Neque quod voluptatem reprehenderit sapiente qui aspernatur aperiam rerum excepturi itaque veritatis? Ut, quis quasi, fuga delectus rem numquam quod ea nesciunt eaque, sint ex. Maxime enim suscipit maiores dolor.</p>
    <p>Atque, quisquam excepturi! Quasi alias asperiores excepturi a omnis ratione iusto repudiandae, unde expedita maxime, quibusdam sequi nemo, odit cumque autem labore aspernatur nisi. Laudantium distinctio voluptas modi natus perferendis.</p>
    <p>Repellendus quia ut explicabo nobis error iusto neque eius iste odio illo veritatis voluptatibus ipsum cupiditate, eum dignissimos, enim praesentium inventore quidem ipsam obcaecati optio! Dolor dicta temporibus molestias iste!</p>
    <p>Quaerat, assumenda voluptas ducimus ipsa deleniti odit, alias nihil ullam, temporibus dolor tempore veniam illum ad iste iusto necessitatibus voluptatum aliquid possimus reiciendis pariatur fugiat labore. Maxime sed voluptate quaerat?</p>
    <p>Vel quod commodi reiciendis, a tempore eveniet. Omnis ipsa tempora itaque libero corporis ab fuga beatae vitae. Earum repellendus, pariatur ab inventore, fugit enim quaerat officiis laudantium laborum, sed quod?</p>
    <p>Alias fugit quos similique eum earum labore, debitis necessitatibus minima tempore eaque expedita, repudiandae id aliquid aperiam quisquam natus consequatur distinctio dignissimos, quasi pariatur. Nostrum sunt exercitationem reprehenderit obcaecati sapiente.</p>
    <p>Reprehenderit perspiciatis doloremque iusto ad totam quibusdam ratione debitis sit commodi illo assumenda eos laudantium cum amet similique voluptas rerum dicta autem nesciunt, voluptatum iure. Minima, ducimus. Labore, minima dignissimos!</p>
    <p>A perferendis, deserunt exercitationem hic quaerat animi minima. Laborum voluptatibus odit temporibus voluptatum quidem earum itaque esse perferendis ipsam, explicabo tempora quod quae nihil fugit ut dolor in ratione fugiat!</p>
    <p>Qui voluptatem impedit, eum alias nobis autem sunt saepe atque provident esse voluptas unde cum. Odio iusto animi, ab magni incidunt eveniet at id saepe? Praesentium sit placeat magnam quae!</p>
    <p>Explicabo nemo suscipit ex neque. Minima earum totam neque eos exercitationem nobis perferendis fuga repudiandae minus corrupti rem suscipit a voluptatem, laboriosam quod quibusdam quae odio non, aliquam nemo illum.</p>
    <p>Hic deserunt tempore ipsa voluptatibus laudantium blanditiis repudiandae temporibus velit, repellat fugit explicabo impedit molestiae. Reprehenderit tempora voluptatum alias officia qui vero soluta. Reprehenderit, aut quas dicta eius sapiente adipisci.</p>
    <p>Autem quidem asperiores distinctio facilis sit eaque temporibus, saepe exercitationem est consectetur minima maiores? Aliquam voluptas libero ullam eligendi. Architecto ipsum repellat excepturi nostrum! Atque voluptate ex corrupti natus vitae?</p>
    <p>Sed culpa rem dolores ullam possimus dicta quas quaerat earum beatae reiciendis ut porro minima quis, iusto, eos ratione eius ipsam quos asperiores soluta. Odit alias eos numquam ut temporibus!</p>
    <p>Ex culpa, magnam veritatis voluptatem commodi quasi sed voluptates aspernatur quia nulla rerum nesciunt dolore porro incidunt dolorum dolor modi, architecto corporis quidem blanditiis perspiciatis natus reiciendis. Dolore, aspernatur saepe.</p>
    <p>Harum maxime provident molestias officia nobis voluptate voluptatibus aut doloribus tempore, dignissimos autem nulla quidem magni quos? Culpa temporibus ducimus quae rerum dignissimos deleniti amet voluptate fugiat explicabo, nisi obcaecati!</p>
    <p>Sed doloremque aliquam quaerat facilis deserunt dicta ipsa adipisci? Cupiditate blanditiis quis quas incidunt quos alias hic recusandae ullam consequuntur aut. Ex vero veniam quidem, delectus recusandae harum cum repellat.</p>
    <p>Velit hic natus dignissimos, repellendus laborum, ab omnis perspiciatis porro id sint debitis! Tenetur ut, minima aliquam possimus qui ipsa quod ratione! Aliquam, voluptatum accusamus nisi quo porro adipisci error.</p>
    <p>Dolorum aut obcaecati odio praesentium libero? Excepturi molestiae inventore fugiat quasi maxime harum aliquid distinctio explicabo. Cumque, vitae fuga, eaque odio error praesentium nostrum aperiam repudiandae libero accusantium ipsa deserunt.</p>
    <p>Doloribus ipsam architecto assumenda voluptatem iusto asperiores voluptatibus cupiditate quae cumque veritatis quasi facere impedit commodi inventore eligendi corporis, aut, illo harum. Veritatis soluta eveniet facere inventore asperiores ipsa beatae?</p>
    <p>Beatae, corporis incidunt expedita, sequi accusamus sunt deserunt cumque in doloremque magnam sit laudantium fuga similique! Optio, rem modi ut aperiam minima aspernatur nulla minus, eaque id ratione maiores laboriosam?</p>
    <p>Eius aut ab fuga numquam quas nulla ipsam aperiam dolorem, dicta excepturi animi cum dolores aliquid sint, ullam mollitia dolor veniam beatae necessitatibus vitae soluta, totam fugit! Libero, doloribus optio?</p>
    <p>Architecto, temporibus earum. Molestiae recusandae doloremque corrupti? Excepturi voluptates dolor accusantium fugit velit, exercitationem deleniti magni reiciendis facilis provident commodi, eveniet eaque voluptate ex, nisi cupiditate esse? Dolore, asperiores possimus.</p>
    <p>Molestias totam, itaque laborum id reiciendis error? Saepe illum mollitia maiores molestias ducimus, inventore totam molestiae incidunt voluptas explicabo, quia aperiam culpa repellat optio voluptate dolorum adipisci autem id quae.</p>
    <p>Soluta neque iure eveniet officiis cumque expedita consequuntur ipsum! Fuga ut, sed sit dolore, dolores amet ipsam quisquam magni quo tenetur, vel eaque minima earum similique harum? Deserunt, nesciunt quasi.</p>
    <p>Recusandae, optio? Aspernatur tenetur natus esse adipisci illum? Expedita officiis accusantium fugiat, eum cupiditate consequuntur quas tenetur, beatae voluptates sed velit eligendi, quisquam maxime distinctio ipsa et aut laudantium eos!</p>
    <p>Qui sequi consequatur quaerat soluta veniam dolor, officiis quidem sapiente minima animi natus deleniti culpa cupiditate accusantium odit cum aperiam quibusdam, necessitatibus recusandae dignissimos quasi iste. Tempora at vel debitis!</p>
    <p>Accusamus dolore maxime quisquam aspernatur culpa laudantium suscipit dolores. Quasi illo explicabo ratione nam aperiam tenetur beatae. Enim vel ullam quidem. Ullam natus aut quis hic blanditiis cumque distinctio placeat.</p>
  </div>
</div>

html,
body {
  margin: 0;
}
.header {
  padding: 16px 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px #ccc solid;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  transition: all 0.3s ease;
  z-index: 10;
}
.header.is_scroll {
  background: #ccc;
  padding: 8px 32px;
  box-shadow: 0 2px 10px #222;
}
.header__menu {
  text-align: center;
}
.header__menu a {
  margin: 0 5px;
}
.header__main-menu {
  text-align: right;
}
.content {
  padding: 51px 32px 60px;
}

window.addEventListener("scroll", function () {
  if (pageYOffset > 0) {
    document.querySelector(".header").classList.add("is_scroll");
  } else {
    document.querySelector(".header").classList.remove("is_scroll");
  }
});