Question

我已经在这里查看过其他的例子，但是找不到能让这项工作成功的例子。我希望在页面滚动时侧边栏（部分）是粘性的。位置：粘贴有效，如果我把它放在导航上，所以我的浏览器def支持它。

＆＃13;

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

＆＃13;

<main>
  <nav></nav>
  <section>
    hi
  </section>
  <article>
    <p>hi</p>
  </article>
</main>

＆＃13;

Answer 1

部分需要一个高度，以便粘性达到你想要的效果，并且因为有粘性的潜在怪癖（当你到达页面底部时，部分会向上推过网格行1），我开始第1行而不是2的部分以及包装容器。

假设您的导航也是粘性的，我会设置其z-index，使其位于该部分的顶部。

我还建议使用@support来使用其他人提到的固定解决方案。

＆＃13;

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

＆＃13;

<main>
  <nav></nav>  
  <section>
    <div id="contents">
      contents
    </div>
  </section>
  <article>
    <p>article</p>
  </article>
</main>

＆＃13;

Answer 2

你需要在你想成为的事物上使用 align-self: start。

sticky

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

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;
  align-self: start;
  
}

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

article p {
  padding-bottom: 1500px;
}

Answer 3

对position: fixed和section使用nav。也许，这与你想要的相似：

＆＃13;

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

＆＃13;

<main>
  <nav></nav>
  <section>
    hi
  </section>
  <article>
    <div class="content">
      <p>hi</p>
    </div>
  </article>
</main>

＆＃13;

Answer 4

您在这里面临的问题是，您的节块消耗了整个高度。因此它不会粘住，因为它太大了。您需要在子节中放置一个子元素，并赋予其粘性属性以使其起作用。根据您的示例，我只是将您的“ hi”包裹在div中。

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>

css网格项上的粘性位置

4 个答案: