javascript - 仅滚动正文文档中的选定内容

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>