<header class="header">
  <div class="container">Header top</div>
</header>

<div class="navigation">
  <div class="container">Header bottom sticky</div>
</div>

<main>
  <div class="container">Lorem ipsum, dolor sit amet consectetur adipisicing elit. At mollitia quae nam omnis enim nobis sint? Tenetur, corporis esse eius temporibus, nisi rerum exercitationem sint aspernatur nobis ut, deserunt at ab. Nostrum fugit temporibus unde eligendi, ab at iusto ut delectus maxime eaque nihil magnam vitae, doloribus quidem eveniet earum, recusandae dicta ea. Cumque quos esse aspernatur accusantium excepturi, impedit rerum sit porro sed exercitationem temporibus aliquid adipisci quibusdam quaerat alias eius beatae. Molestias eligendi quia, doloribus ipsam odio culpa eius maxime, earum ab alias, quos aut. Sunt ipsam nemo temporibus dignissimos aliquid quisquam debitis. Iste voluptas nam, est numquam obcaecati vitae similique aut vero minus mollitia cupiditate commodi consequatur deserunt deleniti blanditiis quae. Quisquam dolor eius molestiae velit harum rem reprehenderit fuga atque nam culpa. Explicabo quae nobis maxime blanditiis aliquam, nisi quas at labore adipisci quisquam provident incidunt pariatur quasi distinctio ex repudiandae quis, id asperiores eligendi! Ex vel error aspernatur expedita? Minima repellat accusamus laboriosam facere, amet debitis quae cupiditate at! Et nisi maiores commodi corporis consectetur ex eveniet autem at, quas exercitationem odio esse laboriosam rerum optio dolores earum cumque harum voluptatem quaerat. Rerum nihil quod maxime illum laboriosam incidunt animi cupiditate accusantium sapiente sequi dignissimos tempora quo deleniti est quia commodi doloremque officia possimus, nulla beatae maiores. Architecto est voluptatem nemo. Sequi commodi eius nesciunt dolor voluptatum quas laborum impedit modi quo suscipit distinctio iusto nam inventore iste, sit aliquam temporibus dolore perferendis natus. Laborum reiciendis quibusdam quo blanditiis reprehenderit deserunt illo hic ipsam perspiciatis iste consectetur eum porro esse doloribus saepe culpa necessitatibus tempora consequatur, quis, officia qui facilis iusto! Nihil, fugit. Natus iure ratione voluptas in saepe officiis veniam nam debitis? Rem repudiandae et placeat veritatis harum, delectus est? Doloremque, voluptatum adipisci sunt ipsum dolorum, quam id hic deleniti commodi, earum explicabo at! Ipsam inventore deleniti magnam earum facere minus cum aspernatur nemo amet reprehenderit iste veritatis totam quae asperiores, ab libero, nesciunt corporis ea obcaecati debitis error, eius laboriosam unde! Reiciendis suscipit assumenda veritatis! Saepe recusandae libero, quibusdam beatae voluptates soluta esse. Temporibus neque ipsam culpa, aliquid modi aliquam! Cum nulla in quos atque nobis, harum veritatis molestiae ipsa excepturi fugiat? Dolores tempora, neque ducimus illo animi ab nemo aliquid iste ipsa fugiat mollitia optio deleniti inventore minima voluptatem, sunt facilis eveniet. Quibusdam porro suscipit accusamus obcaecati odio iure est tempore iusto recusandae. Sint autem error in exercitationem! Nobis veniam, necessitatibus reiciendis perspiciatis incidunt reprehenderit cumque nihil blanditiis laudantium, itaque recusandae quo odit tempora id neque sint deserunt impedit beatae dolor. Aperiam in delectus a voluptatem, hic rerum, nihil similique reiciendis accusamus aspernatur doloremque fugit minima sunt provident inventore molestias quibusdam. Illum, rerum atque dolorem, consequatur veniam maxime mollitia, a repellat aut ad deleniti debitis voluptatem labore non! Minus, placeat sed recusandae ratione voluptatem molestiae sequi! Odit eos vel dolor provident at voluptates, tempora natus maiores odio nostrum aperiam animi quis assumenda magni distinctio dicta facilis perspiciatis id neque ut explicabo, molestias alias quibusdam. Necessitatibus ducimus est repudiandae quisquam optio ipsam fuga corporis rem harum unde, amet voluptate placeat quia nemo dolor facilis ad temporibus ipsa tempora? Dicta, cum odio fuga culpa eius, officiis quo repellat quaerat accusantium ullam nisi pariatur quasi id porro quos eaque excepturi sequi et ipsam. Impedit harum, dolor amet, corporis vel repellendus vitae corrupti suscipit voluptatum quia iusto enim labore qui laboriosam illo dolore excepturi aliquam similique cum exercitationem adipisci molestiae! Unde dolorum ex nihil ratione sapiente. Repellendus culpa sunt laborum dolorem quidem similique at aperiam, iste, suscipit facere temporibus quisquam. Necessitatibus eos quis mollitia consectetur debitis quae, maxime accusamus ad, eveniet, veritatis aliquam nam minus ipsam quisquam incidunt! Labore, adipisci. Dolor placeat dolorum deserunt ad quod officiis illum temporibus aliquam nostrum modi! Omnis, amet temporibus totam nobis possimus enim cupiditate ullam nulla, iure aut, minima consectetur provident saepe illum doloribus? Quos, nobis voluptatum. Sint facilis veniam quos eligendi. Corporis doloribus autem, at aut ipsa dolore, tempora saepe repudiandae ad dolor tempore earum eveniet cum, atque exercitationem quaerat magnam et placeat labore recusandae maiores voluptate suscipit? Laboriosam possimus illo aspernatur, inventore quibusdam omnis deserunt laudantium nam! Quisquam labore error id quos accusantium. Praesentium possimus sequi atque exercitationem voluptatibus deleniti ducimus illum quaerat quos perspiciatis quod quasi a ad explicabo dolore incidunt corrupti, vero eum excepturi laboriosam. Veniam ducimus excepturi at recusandae officiis eaque cum illo, earum quos quidem voluptatibus? Eligendi, sit vitae. Et eaque blanditiis impedit. Cumque dignissimos sapiente placeat accusantium quidem, quis dicta accusamus molestiae quisquam necessitatibus suscipit repellendus reiciendis eveniet, in sit! Amet, impedit quia molestiae asperiores voluptates vitae debitis voluptatibus sapiente ullam earum soluta eligendi assumenda odit eius facere est! Officia aliquam dicta numquam ipsam est similique deserunt at minima ullam, id nemo, exercitationem tempore sit repudiandae in saepe? Sunt fuga obcaecati inventore dolorum libero provident saepe, dolore velit vel nam at deserunt dignissimos, non fugiat rerum molestias, rem a veritatis. Excepturi quod quibusdam aliquam reiciendis iure debitis et? Quod obcaecati facilis ab ut nisi voluptatum repellat porro esse eum quidem quam accusamus veritatis in tenetur, nostrum doloremque ipsum, blanditiis laudantium recusandae molestiae. Aperiam, corporis! Dolor quidem aut numquam quasi rem cupiditate nihil eius reiciendis, tenetur fugit laboriosam sequi ullam rerum quae! Soluta delectus voluptate quos consequuntur officiis incidunt mollitia modi explicabo, ratione laborum amet aspernatur est laboriosam accusantium consectetur obcaecati! Placeat quasi inventore tempore suscipit pariatur harum minus, nesciunt beatae laborum labore quidem? Enim perferendis nam ab rerum modi odio. Nam qui suscipit doloribus iusto quas ratione dolores distinctio voluptatem. Iure sapiente aliquam id soluta, ipsam nihil maiores. Esse eos explicabo amet et atque praesentium rerum labore ipsa beatae consequatur asperiores doloribus unde quisquam doloremque, est dolores, a nihil sequi nisi autem fugiat deserunt possimus debitis! Exercitationem esse numquam, repudiandae nobis magni placeat nam distinctio at labore nostrum aspernatur, modi facere, quam facilis commodi? Et tempora ab ipsam cumque similique blanditiis a veniam distinctio aperiam inventore itaque sequi nam consequuntur recusandae, suscipit culpa maxime doloribus neque dolorum nostrum illum eveniet illo libero. Iste minima facilis ullam totam. Atque rerum eos id expedita necessitatibus, incidunt culpa, aliquid cum sed ullam maiores placeat, voluptatibus voluptate harum nulla accusamus et. Explicabo veritatis tempora sint laborum architecto iure aut facere incidunt necessitatibus quia sit debitis id voluptatem minima neque quod esse provident voluptates maiores pariatur a, dolor rem! Itaque error dolor facere minus alias? Sunt ad quaerat illum. Harum voluptatibus iste illum quaerat ex velit repudiandae sit odit iure commodi, fuga quis repellendus temporibus maxime quos cum illo sapiente, perferendis voluptate quibusdam veniam. Ex nemo cupiditate et a deserunt soluta, tempore ipsum eligendi qui quibusdam, nulla culpa porro itaque non autem! Sed nam ullam voluptates impedit? Aliquam voluptatibus incidunt obcaecati, voluptatum nemo tempore, laboriosam, harum autem dolorum reiciendis rem. Ex iusto repellendus molestiae excepturi rem, sunt ullam dolore quam, voluptate delectus ab aspernatur nostrum doloribus ad cupiditate alias et voluptas. Nihil voluptatibus sapiente saepe. Repellendus eligendi explicabo iste perferendis! Tempora, harum. Facere eligendi ea reprehenderit minima aliquam. Doloribus iure accusantium cupiditate perspiciatis obcaecati in, odio, porro ipsa dolorem eveniet fuga, libero officiis numquam facilis earum similique tempore iusto tenetur quae hic. Repellendus unde asperiores vero blanditiis eaque earum accusantium? Vero molestiae ullam laborum ipsa, quidem ut blanditiis natus consequuntur tenetur voluptatem ducimus doloribus facilis, nemo dicta omnis eligendi repudiandae, autem nobis excepturi vel commodi. In odio quisquam neque sed nobis beatae, molestiae atque, quod asperiores amet, quas quo nulla id laborum error. Ratione, officia. Ullam vel sunt facilis eaque voluptates tenetur, reprehenderit labore voluptatum veritatis, error dolore a, eius magnam ad repellendus. Dolores dicta cupiditate magni. Saepe recusandae quas atque ipsam reprehenderit aspernatur soluta similique distinctio! Reprehenderit obcaecati alias laborum cupiditate a voluptates nobis. Excepturi aliquam quod sit, eligendi quia eius tenetur? Rem minus in alias tempore magnam omnis ipsam tenetur quia, enim sit ratione, molestias natus ut iste optio qui? Ratione id illum quaerat dignissimos modi odit debitis aliquam repellendus, quis hic explicabo quidem cupiditate sequi facere voluptate vel nihil autem velit nobis unde placeat rerum, ipsum quas minus! Soluta aut aspernatur provident explicabo. Ullam non praesentium labore impedit, delectus commodi totam placeat minus repellendus eum at quia omnis amet ipsam debitis perferendis atque. Non vero assumenda excepturi, laudantium illum error placeat, doloribus eum dolorum similique velit consequatur ipsum minus quae culpa dolor facilis, cumque at ut! Porro molestias, repudiandae corrupti labore dolor quo reiciendis necessitatibus autem inventore delectus! Molestiae harum natus est? Deserunt tenetur neque necessitatibus sint pariatur incidunt, quasi dolore, quibusdam facilis aperiam excepturi quidem laborum ab odit illum rem cumque adipisci impedit, asperiores aspernatur! Quisquam impedit quo molestias cupiditate nobis ipsa dolor enim, id, eos qui incidunt iure tempore optio dicta laudantium atque eaque. Nulla id magni facilis, error dignissimos voluptatem quam eius quaerat vel. Perferendis iusto ipsum aut assumenda ipsa doloribus at sint accusamus tempora quo explicabo magnam minus, dolores amet officia impedit id quod voluptatibus natus, provident nam aspernatur ab repellendus sapiente. Repudiandae molestiae facilis necessitatibus explicabo perferendis numquam consectetur laudantium eius magni eaque tempore omnis qui nobis ea soluta atque praesentium aut ad iste quaerat culpa repellat, animi unde? Modi.</div>
</main>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

main {
  padding: 40px 0;
}

.container {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 20px;
}

.header,
.navigation {
  width: 100%;
  height: 50px;
  color: #fff;
  display: flex;
  align-items: center;
}

.header {
  background-color: #666;
}

.navigation {
  background-color: #222;
  position: sticky;
  top: 0;
}