Próbuję zmusić mój pasek boczny lepki, gdy NavBar dotknie paska bocznego. Jednak wydaje się, że nie działa z jakiegoś powodu nie wiem, czy jest to problem z flexbox, ale nie mam pojęcia, dlaczego nie staje się lepki.

Mój 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>

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

Codepen do mojego problemu jest https://codepen.io/mrsalami/pen/onxqyox. Wszelka pomoc zostanie doceniona.

0
Jafar Salami 27 marzec 2020, 09:47

1 odpowiedź

Najlepsza odpowiedź

Dodaj przesunięcie na pasku bocznym, ze względu na nawigację.

&__sidebar{
    position: sticky;
    top: 100px;
    &__links{
      display: block;
    }
  }
0
Riku 27 marzec 2020, 07:14