时间戳

首页 > 解决方案 > 位置 polyfill 粘性无法与列正常工作

html - 位置 polyfill 粘性无法与列正常工作

问题描述

当导航栏接触侧边栏时，我试图让我的侧边栏变粘。但是，由于某种原因，它似乎不起作用我不知道这是否是 flexbox 的问题，但我不知道为什么它不会变得粘稠。

我的 HTML：

<div class='nav'><h1>Nav</h1></div>
<div class="container">
  <div class="m01">
    <div class="m01__grid">
      <div class="m01__grid__text">
        <h2>Tell me tommorrow</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates error aperiam ratione dolorem amet sequi iste et deserunt nisi laudantium, architecto quaerat necessitatibus suscipit est! Fugit illo vero et odio?</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates error aperiam ratione dolorem amet sequi iste et deserunt nisi laudantium, architecto quaerat necessitatibus suscipit est! Fugit illo vero et odio?</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates error aperiam ratione dolorem amet sequi iste et deserunt nisi laudantium, architecto quaerat necessitatibus suscipit est! Fugit illo vero et odio?</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates error aperiam ratione dolorem amet sequi iste et deserunt nisi laudantium, architecto quaerat necessitatibus suscipit est! Fugit illo vero et odio?</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates error aperiam ratione dolorem amet sequi iste et deserunt nisi laudantium, architecto quaerat necessitatibus suscipit est! Fugit illo vero et odio?</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates error aperiam ratione dolorem amet sequi iste et deserunt nisi laudantium, architecto quaerat necessitatibus suscipit est! Fugit illo vero et odio?</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates error aperiam ratione dolorem amet sequi iste et deserunt nisi laudantium, architecto quaerat necessitatibus suscipit est! Fugit illo vero et odio?</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates error aperiam ratione dolorem amet sequi iste et deserunt nisi laudantium, architecto quaerat necessitatibus suscipit est! Fugit illo vero et odio?</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipijjsicing elit. Voluptates error aperiam ratione dolorem amet sequi iste et deserunt nisi laudantium, architecto quaerat necessitatibus suscipit est! Fugit illo vero et odio?</p>
      </div>
      <div class="m01__grid__sidebar">
        <div class="m01__sidebar">
          <h3 class="m01__sidebar__title">Sidebar</h3>
          <a href="#!" class="m01__sidebar__links">This is a link</a>
          <a href="#!" class="m01__sidebar__links">This is a link</a>
          <a href="#!" class="m01__sidebar__links">This is a link</a>
        </div>
      </div>
    </div>
  </div>
</div>

我的 CSS/Sass：

html,
body{
  padding: 0;
  margin: 0;
}
.container{
  width: 90%;
  margin: 0 auto;
  max-width: 1107px;
  position: relative;
}
.nav{
  position: fixed;
  width: 100%;
  top:0;
  background-color: grey;
  height: 100px;
  z-index: 9;
  h1{
    margin: 0;
  }
}

.m01{
  margin-top: 150px;
  &__grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    &__text{
      width: calc(70% - 40px);

    }
    &__sidebar{
      width: calc(30%);
    }
  }

  &__sidebar{
    position: sticky;
    &__links{
      display: block;
    }
  }
}

我的问题的代码笔是https://codepen.io/mrsalami/pen/oNXQYOx。任何帮助将不胜感激。

标签： htmlcsssass

解决方案

由于您的导航，在您的侧边栏添加偏移量。

&__sidebar{
    position: sticky;
    top: 100px;
    &__links{
      display: block;
    }
  }

推荐阅读