web-dev-qa-db-fra.com

position collante sur les éléments de la grille css

J'ai regardé d'autres exemples de ceci ici mais je ne peux pas en trouver un qui fait ce travail. Je veux que la barre latérale (section) soit collante pendant le défilement de la page. la position: sticky fonctionne si je le mets sur la navigation, donc mon navigateur le prend en charge.

main {
  display: grid;
  grid-template-columns: 20% 55% 25%;
  grid-template-rows: 55px 1fr;
}

nav {
  background: blue;
  grid-row: 1;
  grid-column: 1 / 4;
}

section {
  background: grey;
  grid-column: 1 / 2;
  grid-row: 2;
  position: sticky;
  top: 0;
  left: 0;
}

article {
  background: yellow;
  grid-column: 2 / 4;
}

article p {
  padding-bottom: 1500px;
}
<main>
  <nav></nav>
  <section>
    hi
  </section>
  <article>
    <p>hi</p>
  </article>
</main>

htmlcsscss3css-positioncss-grid
7
totalnoob

la section a besoin d’une hauteur suffisante pour permettre à Sticky d’obtenir l’effet souhaité et en raison des bizarreries potentielles avec Sticky (c’est-à-dire que la section Repasserait au-dessus de la ligne de grille 1 lorsque vous atteignez le bas de la page). 1 plutôt que 2 avec un emballage.

en supposant que votre navigation est également collante, je définirais son index z afin qu'il soit au-dessus de la section.

Je suggérerais également d'utiliser @support pour utiliser les solutions fixes mentionnées par d'autres.

      main {
        display: grid;
        grid-template-columns: 20% 55% 25%;
        grid-template-rows: 55px 1fr;
      }
      
      nav {
        background: blue;
        grid-row: 1;
        grid-column: 1 / 4;
        z-index: 2;
        position: sticky;
        top: 0;
      }
      
      section {
        background: grey;
        grid-column: 1 / 2;
        grid-row: 1;
        position: sticky;
        top: 0;
        left: 0;
        height: 100vh;
      }
      
      section #contents {
        position: relative;
        top: 55px;
      }
      
      article {
        background: yellow;
        grid-column: 2 / 4;
      }

      article p {
        padding-bottom: 1500px;
      }
<main>
  <nav></nav>  
  <section>
    <div id="contents">
      contents
    </div>
  </section>
  <article>
    <p>article</p>
  </article>
</main>

9
codechella

Utilisez position: fixed pour votre section et nav. Peut-être que cela ressemble à ce que vous voulez:

body {
  margin: 0;
}

nav {
  background: blue;
  height: 80px;
  z-index: 9;
  width: 100%;
  position: fixed;
}

article {
  width: 100%;
  display: grid;
  grid-template-columns: 20vw auto;
}

article p {
  padding-bottom: 1500px;
}

section {
  position: fixed;
  width: 20vw;
  background: grey;
  height: 100%;
  top: 80px;
}

.content {
  margin-top: 80px;
  position: relative;
  grid-column-start: 2;
  background: yellow;
}
<main>
  <nav></nav>
  <section>
    hi
  </section>
  <article>
    <div class="content">
      <p>hi</p>
    </div>
  </article>
</main>

0
Rakibul Islam