All geek questions in one place

Can I use CSS `position: sticky` outside the parent container?

My markdown looks something like this:

<body>
  <header>
   <div class"logo" />
   <div class"contact-info" />
   <div class="sticky-navigation"/>
  </header>
<main>
  <!-- content -->
</main>
</body>

I need to make the div with the class sticky-navigationbehave like sticky navigation when the user scrolls the body. Is there a way to use position:stickyto do the same?

As far as I have seen, usage is position:stickyhighly dependent on markup and will only work on everything <header/>.

+4
source share
1 answer

position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
Run codeHide result

If you use only css - you can use the position: fixed

-3
source

Source: https://habr.com/ru/post/1678148/

More articles:


All Articles