Scrolling only selected content in the body document

user_11682360 0
Viewed 109

I would like to use the page scroll effect so that only the content of the #right element is scrolled in the layout. A similar effect can be seen on Facebook when scrolling posts (posts are scrolled while the left panel and upper bar remain in place). Any of you have an idea how can I get the same effect for my #right container in the code?

#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>

css html jquery javascript
3 Answers

Using JQuery you can add a class with style of position:fixed and top:0 and triggered using scroll function for better view/effect of the element on the side. 

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

user_37398380

Use position: fixed property in 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>
There is some position disblancing because you have your header. Use this property to which div you want to stick with scroll. An do placement as you need.

user_109155340

Use position: fixed and decrease its height of class "left".

user_111602020
Related