मुख्य भाग दस्तावेज़ में केवल चयनित सामग्री को स्क्रॉल करना

$(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>