Прокрутка только выбранного содержимого в основном документе

Question

Я хотел бы использовать эффект прокрутки страницы, чтобы в макете прокручивалось только содержимое элемента #right. Аналогичный эффект можно увидеть на Facebook при прокрутке сообщений (сообщения прокручиваются, пока левая панель и верхняя панель остаются на месте). У кого-нибудь из вас есть идея, как получить такой же эффект для моего контейнера #right в коде?

#header,#footer{
  width:100%;
  height:80px;
  background:blue;
}

#content{
  width:1000px;
  margin:0 auto;
  overflow:hidden;
}

#left{
  width:200px;
  float:left;
  background:green;
  margin:20px 0;
  height:100vh;
}

#right{
  float:right;
  width:calc(100% - 220px);
}

.item{
  height:80px;
  margin:20px 0;
  background:red;
}

<div id="header">
    header
</div>

<div id="content">
    <div id="left">
        left
    </div>
    <div id="right"> 
    <!-- this content is scrolling-->
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
    </div>
</div>

<div id="footer">
    footer
</div>

Answer 1

Используя JQuery, вы можете добавить класс со стилем position:fixed и top:0 и запустить его с помощью функции прокрутки для лучшего обзора / эффекта элемента на стороне.

$(window).scroll(function(){
		var header_height = $('#header').height();
      if ($(this).scrollTop() > header_height) {
          $('#left').addClass('fixed');
      } else {
          $('#left').removeClass('fixed');
      }
});

#header,#footer{
  width:100%;
  height:80px;
  background:blue;
}

#content{
  width:1000px;
  margin:0 auto;
  overflow:hidden;
}

#left{
  width:200px;
  float:left;
  background:green;
  margin:20px 0;
  height:100vh;
}

#right{
  float:right;
  width:calc(100% - 220px);
}

.item{
  height:80px;
  margin:20px 0;
  background:red;
}

.fixed{
  position:fixed;
  top:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
    header
</div>

<div id="content">
    <div id="left">
        left
    </div>
    <div id="right"> 
    <!-- this content is scrolling-->
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
    </div>
</div>

<div id="footer">
    footer
</div>

Answer 2

Использовать position: fixed свойство в CSS

#header,#footer{
  width:100%;
  height:80px;
  background:blue;
}

#content{
  width:1000px;
  margin:0 auto;
  overflow:hidden;
}

#left{
  width:200px;
  float:left;
  background:green;
  /* Enter The Position Fixed Property Here! */
  position:fixed;
  margin:20px 0;
  height:100vh;
}

#right{
  float:right;
  width:calc(100% - 220px);
}

.item{
  height:80px;
  margin:20px 0;
  background:red;
}

<div id="header">
    header
</div>

<div id="content">
    <div id="left">
        left
    </div>
    <div id="right"> 
    <!-- this content is scrolling-->
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
    </div>
</div>

<div id="footer">
    footer
</div>

Из-за того, что у вас есть заголовок, есть некоторая расстановка позиций. Используйте это свойство, для которого div вы хотите придерживаться прокрутки. Сделайте размещение как вам нужно.

Answer 3

Использовать положение: исправлено и уменьшить его высоту класса "left".