<main>
 <nav class="menu">
  <a href="#bottom">Bottom</a>
 </nav>
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus corrupti id nisi magni. Quas veritatis est, illo molestiae earum dicta deserunt accusantium beatae explicabo, nam repellendus perspiciatis? Non delectus optio quod esse quis 
 
  <div id="bottom"><b>BOTTOM</b></div>
 
 fugiat magni id corporis modi, assumenda vero quos voluptate ex dolorum mollitia sed laudantium repellendus iusto, expedita saepe autem? Libero soluta qui tempore error, ex perferendis corporis saepe mollitia porro illo, quis ratione iure assumenda numquam aliquid. Incidunt enim nisi assumenda. Molestias obcaecati nobis vitae? Suscipit officia, aspernatur eveniet deleniti adipisci recusandae libero ratione pariatur in atque consequuntur quisquam laborum sint repellat quia voluptas quaerat ipsam voluptates? Suscipit iure recusandae praesentium quam quo asperiores est, necessitatibus tempore aliquid? Dicta ratione architecto inventore esse, laboriosam alias sequi velit soluta labore. Aspernatur, dolor placeat quae quia reiciendis et temporibus sint voluptatem molestias eaque dignissimos incidunt fugiat voluptates ipsa nihil optio mollitia possimus exercitationem corporis doloremque porro quo. Distinctio facilis, quaerat iste qui aperiam dolore autem veniam! Molestiae, iure architecto. Facilis in rem nesciunt, tenetur voluptatum tempora quidem totam repudiandae quibusdam aut, quis officiis iusto similique. Rem odio tenetur odit at necessitatibus hic alias. Deleniti quia quo ex explicabo eum corporis culpa quasi veritatis tempora mollitia, non nobis ea molestiae impedit delectus dolorum autem quae itaque dolorem perspiciatis obcaecati eos at, esse laudantium. Sit impedit ad amet facilis ipsum dolorum, quo incidunt deserunt excepturi animi exercitationem aut earum qui aperiam accusantium repellendus! Molestias modi ducimus sunt autem animi architecto voluptatem atque dicta tempora molestiae facere libero sint ut fugiat veniam delectus labore provident rerum, mollitia perferendis dolore illo aut? Explicabo voluptate inventore vero ipsa accusantium! Dolorum, quod modi aut ut exercitationem cum doloribus corporis facilis blanditiis porro repellendus nisi omnis, ea eius natus? Saepe deserunt ad iusto! Voluptas consectetur maxime corporis ipsum esse adipisci accusantium! Ipsam quasi fuga blanditiis, perferendis quam rem ullam repellat, quae voluptatum illum, quo eveniet alias omnis commodi est pariatur voluptate distinctio. Sunt, cupiditate rem dolorum obcaecati aut sint et quam sapiente commodi. Inventore vel hic sit omnis, alias aperiam, possimus amet ducimus eligendi, porro necessitatibus? Aspernatur architecto nemo sed blanditiis molestiae quod culpa voluptate qui odio asperiores deserunt impedit, numquam fuga animi expedita harum dolorem quidem cumque, accusamus odit aliquam, laboriosam possimus modi. Corrupti, molestias quasi ab ut nulla modi doloribus ipsam voluptatem ratione amet vitae autem iste tenetur doloremque recusandae facere magnam suscipit vel! Voluptatum nostrum deserunt praesentium dolor et quos quisquam labore dignissimos cum, accusantium nobis aliquid sed! Reiciendis cupiditate deleniti necessitatibus ratione facere earum ullam similique assumenda maiores itaque dolorum delectus ea iure adipisci, minima repellendus consectetur blanditiis sed voluptatibus nobis incidunt debitis. Saepe, et veniam. Impedit atque tempora autem sequi dolore earum provident quisquam, nihil quia quaerat ullam! Facilis iste laboriosam corrupti, nemo expedita eos assumenda commodi, vero, obcaecati temporibus a perspiciatis inventore eius! Iusto debitis aspernatur quasi doloremque distinctio non assumenda voluptates! Sit quis repellendus ad recusandae magni soluta aliquid iusto officiis deleniti in nemo quod natus numquam modi distinctio eius rem ullam eos, minima ipsa qui, sunt, voluptatibus voluptatum?
 

 
 
</main>

main {
 max-width: 300px;
}

.menu {
  background-color: #eee;
  position: sticky;
  top: 0;
}

#bottom {
 background-color: red;
 padding: 16px;
}