css 当挠性元件为全宽时，为什么粘性元件不粘在顶部？

2lpgd968 于 2023-02-10 发布在其他

关注(0)|答案(2)|浏览(158)

我有一个Flex div，它包含另外两个元素，当在桌面上全屏查看时，其中一个元素充当侧边栏，而在较小的屏幕上，这些元素会折叠起来，一个显示在另一个的顶部。
此技术在Every Layout上进行了说明。
我想介绍一个用于导航的sticky元素。在宽屏上，它可以正常工作。我可以滚动页面，sitcky元素会粘在顶部。但是，在较窄的窗口中，该元素不会粘在上面。它会滚动到视图之外--在Safari和Firefox中都是如此。

.with-sidebar {
    display: flex;
    flex-wrap: wrap;
  }

  .with-sidebar > :first-child {
    flex-basis: 20rem;
    flex-grow: 1;

    background-color: green;
  }

  .with-sidebar > :last-child {
    flex-grow: 999;
    min-inline-size: 50%;

    background-color: red;
  }

  .sticky {
    position: sticky;
    top: 1rem;
  }

<div class="with-sidebar">
  <div>
    <h1>Sidebar</h1>
      <div style="height:10rem">Spacer</div>
    <div class="sticky">
      <h1>Sticky Element</h1>
    </div>
  </div>
  <div>
    <h1>Not Sidebar</h1>
    <div style="height:200rem">Spacer</div>
  </div>
</div>

除此之外，我还尝试过将sticky封装到另一个元素中，尝试过将align-self: flex-start;应用到sticky中，但还没有找到任何有效的方法。
当侧边栏和非侧边栏垂直堆叠以及并排放置时，如何确保元素是粘性的？

- 更新**

我曾经尝试过将.with-sidebar放在一个更高的 Package 器中。现在，发生了什么事情很清楚了。不是侧边栏的元素正在将粘性元素推离屏幕。当元素并排时，这种情况不会发生。但是，在一个较小的窗口中，非侧边栏元素就在粘性元素的正下方。

<div style="height: 400rem">
      <div class="with-sidebar">
        <div>
          <h1>Sidebar</h1>
            <div style="height:10rem">Spacer</div>
            <div class="sticky">
              <h1>Sticky Element</h1>
            </div>
        </div>
        <div>
          <h1>Not Sidebar</h1>
          <div style="height:60rem">Spacer</div>
        </div>
      </div>
    </div>

css

来源：https://stackoverflow.com/questions/75367667/why-does-the-sticky-element-not-stick-to-the-top-when-the-flex-element-is-full-w

2条答案

按热度按时间

xmd2e60i1#

我认为最好重做标记（或设计），例如，如果你指定了一个块的高度，“粘性元素”就位于其中，div:has(.sticky) { height: 500px; }，那么元素开始“粘一点”，或者另一个例子，改变嵌套

<body>
  <div class="with-sidebar">
    <div>
      <h1>Sidebar</h1>
      <div style="height: 10rem">Spacer</div>
      <!-- <div class="sticky">
            <h1>Sticky Element</h1>
        </div> -->
    </div>
    <div class="sticky">
      <h1>Sticky Element</h1>
    </div>
    <div>
      <h1>Not Sidebar</h1>
      <div style="height: 200rem">Spacer</div>
    </div>
  </div>
</body>

并为此元素添加属性 align-self。

.sticky {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
}

但我不认为这就是全部。这只是一个例子，让你可以看到如何元素的工作。规范CSS Positioned Layout Module Level 3非常简要地描述了行为的元素时，定位粘性。

赞(0）回复(0）举报 2023-02-10

r7s23pms2#

如果10雷姆不是你想要的，使用媒体查询顶部位置...

.sticky {
    position: fixed;
    top: 10rem;
  }

更新：我澄清我的想法：

<div class="with-sidebar">
        <div>
        <h1>Sidebar</h1>
            <div style="height:10rem">Spacer</div>
            <div class="sticky_desktop">
                <h1>Sticky Element</h1>
            </div>
        </div>

        <div>
            <div class="sticky_mobile">
                <h1>Sticky Element</h1>
            </div>
            <h1>Not Sidebar</h1>
            <div style="height:200rem">Spacer</div>
        </div>
     </div>

.with-sidebar {
    display: flex;
    flex-wrap: wrap;
}

.with-sidebar > :first-child {
    flex-basis: 20rem;
    flex-grow: 1;

    background-color: green;
}

.with-sidebar > :last-child {
    flex-grow: 999;
    min-inline-size: 50%;

    background-color: red;
}

.sticky_desktop {
    position: sticky;
    top: 1rem;
}

.sticky_mobile {
    position: sticky;
    top: 1rem;
    color: violet;
}

.sticky_mobile>h1{
    margin-block-start: 0;
    margin-block-end: 0;
}

@media screen and (min-width : 656px ){

    .sticky_mobile {
        display:none;
    }
}

 @media screen and (max-width : 655px ){

    .sticky_desktop {
        display:none;
    }
 }

赞(0）回复(0）举报 2023-02-10

我来回答

css 当挠性元件为全宽时，为什么粘性元件不粘在顶部？

2条答案

相关问题

热门标签

最新问答