Как зафиксировать сайдбар при скролле страницы?

Question

Как можно зафиксировать сайдбар по верхнему краю экрана при скролле страницы?

.wrap {
  position: relative;
}

.navigation {
  height: 100%;
  max-height: 1000px;
  position: absolute;
  border-left: 1px solid #000;
  right: 0;
  top: 0;
  width: 150px;
  background-color: #ccc;
}

.content {
  margin-right: 150px;
  float: left;
  height: 1000px;
  background: #fcfcfc;
  width: 100%;
}

.header {
  background-color: #333;
  height: 100px;
}

.footer {
  background-color: #333;
  height: 500px;
}

<div class="header">Шапка</div>
<div class="wrap">
  <div class="content">
    <div>Контент</div>
  </div>
  <div class="navigation">
    <div id="main">
      <div>Сайдбар</div>
    </div>
  </div>
  <div style="clear: both;"></div>
</div>
<div class="footer">Подвал</div>

Answer 1

var wrap = $('.wrap');
var sidebar = $('.navigation');
$(window).scroll(function() {
  var sdb = $(document).scrollTop();
  var sdb1 = wrap.offset().top;
  var sdb2 = sdb1 + wrap.outerHeight() - $(window).height();
  if (sdb > sdb1) {
    sidebar.css('position', 'fixed');
  } else {
    sidebar.css('position', 'absolute');
  }
  if (sdb > sdb2) {
    sidebar.css('top', sdb2 - sdb);
  } else {
    sidebar.css('top', '0');
  }
});

* {
  margin: 0;
  padding: 0;
}

.wrap {
  position: relative;
}

.navigation {
  height: 100%;
  max-height: 1000px;
  position: absolute;
  border-left: 1px solid #000;
  right: 0;
  top: 0;
  width: 150px;
  background-color: #ccc;
}

.content {
  margin-right: 150px;
  float: left;
  height: 1000px;
  background: #fcfcfc;
  width: 100%;
}

.header {
  background-color: #333;
  height: 100px;
}

.footer {
  background-color: #333;
  height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">Шапка</div>
<div class="wrap">
  <div class="content">
    <div>Контент</div>
  </div>
  <div class="navigation">
    <div id="main">
      <div>Сайдбар</div>
    </div>
  </div>
  <div style="clear: both;"></div>
</div>
<div class="footer">Подвал</div>

Answer 2

Решение с помощью position: sticky; Только немного пришлось пододвинуть вёрстку, использование float и абсолютного позиционирования здесь не уместно.

caniuse - 92% поддержки в браузерах.

документация

.wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}

.navigation {
  border-left: 1px solid #000;
  width: 150px;
  background-color: #ccc;
  flex-shrink: 0;
}

.navigation #main {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.content {
  height: 1000px;
  background: #fcfcfc;
  width: 100%;
}

.header {
  background-color: #333;
  height: 100px;
}

.footer {
  background-color: #333;
  height: 500px;
}

<div class="header">Шапка</div>
<div class="wrap">
  <div class="content">
    <div>Контент</div>
  </div>
  <div class="navigation">
    <div id="main">
      <div>Сайдбар</div>
    </div>
  </div>
</div>
<div class="footer">Подвал</div>

БЛОГ НА HUSL

Как зафиксировать сайдбар при скролле страницы?

Ответы (2 шт):