CSS sticky menu container scroll state queries

• container
• @container
• scroll-state
• sticky

Votre navigateur ne supporte pas cette démonstration

Sur Chrome 110+, tapez dans la barre d'adresse : chrome://flags. Puis cherchez Experimental Web Platform features et passez la valeur à enabled.

<header></header>

<div class="conteneur">

<nav>
<a href="">Rubrique</a>
<a href="">Rubrique</a>
<a href="">Rubrique</a>
<a href="">Rubrique</a>
<a href="">Rubrique</a>
</nav>
</div>
	
...

*,
*::before,
*::after{

box-sizing: border-box

}

header{min-height:12rlh;}

.conteneur {

container-type: scroll-state;
position: sticky;
z-index: 1;
top:0; 

    }

nav {

display: flex;
flex-flow: wrap;
align-items: center;
justify-content: space-around; 
justify-self: center;
gap: .5rem;
padding: 1lh;
min-height: 2lh;
width: fit-content;
interpolate-size: allow-keywords;
transition: all .3s;

@container scroll-state(stuck: top) {

nav{ 

width: 100%;
background-color: white;
box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.02),
  0px 4px 3px rgba(3, 7, 18, 0.02),
  0px 8px 6px rgba(3, 7, 18, 0.02),
  0px 14px 11px rgba(3, 7, 18, 0.02),
  0px 22px 17px rgba(3, 7, 18, 0.02),
  0px 32px 24px rgba(3, 7, 18, 0.02);

       
      }

    }
     }