webentwicklung-frage-antwort-db.com.de

klebrige Position auf CSS-Gitterelementen

Ich habe mir hier andere Beispiele angeschaut, aber ich kann nicht finden, dass dies funktioniert. Ich möchte, dass die Seitenleiste (der Abschnitt) klebrig bleibt, während die Seite scrollt. die position: sticky funktioniert, wenn ich es in das nav setze, so dass mein browser def es unterstützt.

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>

7
totalnoob

abschnitt benötigt eine Höhe, damit Sticky den gewünschten Effekt erzielen kann, und wegen möglicher Macken mit Sticky (dh der Abschnitt würde die Rasterreihe 1 nach oben verschieben, wenn Sie das Ende der Seite erreichen), würde der Abschnitt in der Rasterzeile beginnen 1 statt 2 zusammen mit einem Verpackungsbehälter.

wenn Ihr Navi auch klebrig ist, würde ich den Z-Index so einstellen, dass er oben im Abschnitt steht.

Ich würde auch vorschlagen, @support zu verwenden, um die anderen Lösungen zu verwenden.

      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

das Problem, mit dem Sie hier konfrontiert sind, ist, dass Ihr Profilblock die volle Höhe einnimmt. es bleibt also nicht haften, da es zu groß ist, um dies zu tun. Sie müssten ein untergeordnetes Element in Ihren Abschnitt einfügen und Ihre Sticky-Attribute angeben, damit es funktioniert. nach deinem beispiel habe ich einfach dein 'hi' in ein div gewickelt.

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;
}

section div {
  position: sticky;
  top: 0;
}

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

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

Verwenden Sie position: fixed für Ihre section und nav. Vielleicht ähnelt es dem, was du willst:

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