1

Looking to create a fixed menu that starts in middle of webpage, but when scrolling down fixes to the top of the page using CSS/HTML.

Is it possible to do this using a container? So the container with the menu starts below a top container and when the top container is scrolled off the page the menu is fixed to the top of that container and the top of the screen?

For example, how can I make it so that the image in the second container stays at the top of the screen when scrolling down the page, but make it stay in the second container:

https://codepen.io/Daggett/pen/mpBaab

    position: sticky;
    <!--doesn't stick!-->

Is there a way to do this only with CSS? I know it can be done with jQuery

Thanks!

daggett
  • 239
  • 2
  • 4
  • 15
  • Possible duplicate of [Sticky Header after scrolling down](https://stackoverflow.com/questions/18382496/sticky-header-after-scrolling-down) – JanS Jan 05 '18 at 15:12

1 Answers1

1

position: sticky needs an explicit vertical position like top:0 to know where to stick to.

Sascha
  • 858
  • 1
  • 16
  • 30