Как сделать такой липкий sidebar?

Question

[Денис Денисов]

На сайте tjournal.ru есть sidebar, который листается вниз и вверх вместе с контентом, я попытался сделать так же:

<div class="sidebar">
            <div class="sidebar__scroll">
                <div class="sidebar__container">
                    <div class="sidebar__item"></div>
                    <div class="sidebar__item"></div>
                    <div class="sidebar__item"></div>
                    <div class="sidebar__item"></div>
                </div>
            </div>
        </div>

.sidebar {
  width: 320px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: -webkit-sticky;
  position: sticky;
  top: 20px;

  .sidebar__scroll {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .sidebar__container {
    width: 300px;
  }

  .sidebar__item {
    min-height: 150px;
    margin-bottom: 20px;
  }
}

но он не листается вместе с контентом, а сразу прилипает к верху страницы, что я делаю не так?

Answer 1

[Антон Усачев]

У .sidebar высота выставлена на 100%. Вероятно, проблема в этом. Ну и следует помнить, что position: sticky не будет работать, если у блока с этим свойством есть предки с overflow: hidden.

Answer 2

[Алекс Глебов]

https://codepen.io/SkiperX/pen/ZNVdBx?editors=1100

Comments

[Денис Денисов]

так я тоже могу сделать, но он не листается вместе с контентом. Я не знаю как нормально объяснить, но посмотри на то, что ты сделал и как сделано на tj