Javascript 将固定位置div滚动到底部，然后停止

我想创建一个页面，就像

Facebook

或

Twitter

一样，中间的div滚动不定式，左边或右边的div只滚动到它的

高度

，然后停在那里

在我的网站上，我还在中间的div中显示不定式数据，在右侧显示一些

固定的
高度数据。我想
滚动
两个div和page
滚动
，右div在达到其高度并停留在那里时停止滚动

我所做的是首先使其
位置：static
，当它到达右div的
底部时，使其
固定。但这并不是我想要的，因为当我将
static
更改为
fixed
时，右div再次进入顶部

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div> I am using style disple flex bcoz I dont know how to use bootstap here(On this site)</div>
     <div class="col=lg-12" style="display:flex">
     <div class="col-lg-3" style="position:fixed;float:left;left:0">some text</div>
     <div class="col-lg-6" id="displayPost" style="float:left;left:0;right:0;text-align:center">post display using ajax<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br></div>
     <div id="staticDiv" class="col-lg-3" style="height:100px;float:right;right:0">//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br></div>
    </div>


我正在使用style Dispre flex bcoz我不知道如何在这里使用bootstap（在这个网站上）
一些文本
使用ajax进行后期显示
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本text
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//一些文字
//
我对代码做了一些更改。检查我的答案是否有差异。我希望有帮助


$（窗口）。滚动（函数（）{
var distanceFromTop=$（document.scrollTop（）；
var h=$（'#staticDiv'）.height（）/2；
如果（距离顶部>=h）{
$（'#staticDiv'）.css({
“位置”：“固定”，
“顶部”：“0px”，
“右”：“0px”
});
}否则{
$（'#staticDiv'）.css({
“位置”：“绝对”，
“顶部”：“0px”
});
}
});
#staticDiv{
高度：200px；
右：0px；
}

我正在使用style Dispre flex bcoz我不知道如何在这里使用bootstap（在这个网站上）
一些文本
使用ajax进行后期显示
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
text
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
text
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本

//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
text
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本
//一些文本

我找到了解决办法。谢谢你的回复

在这里发布我的解决方案，欢迎提供更多建议

$(function(){
var lastScroll = 0;
var childLastScroll = 0;
var currentScroll = 0;
var child = document.getElementById('scroll101');
$(window).scroll(function(){
  currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
  console.log(currentScroll);
  if(lastScroll < currentScroll){
    if(childLastScroll < child.scrollHeight){
      childLastScroll += 20;
    }else{
      childLastScroll = child.scrollHeight;
    }
  }else if(lastScroll > currentScroll){
    if(currentScroll == 0){
      childLastScroll = 0;
    }else{
      if(childLastScroll >= 20){
        childLastScroll -= 20;
      }else{
        childLastScroll = 0;
      }
    }
  }
  $('#scroll101').scrollTop(childLastScroll);
  lastScroll = currentScroll;
});
});

$（函数（）{
var lastScroll=0；
var childlastcoll=0；
var currentScroll=0；
var child=document.getElementById（'scroll101'）；
$（窗口）。滚动（函数（）{
currentScroll=document.documentElement.scrollTop | | document.body.scrollTop；
console.log（currentScroll）；
如果（lastScrollcurrentScroll）{
如果（currentScroll==0）{
childLastScroll=0；
}否则{
如果（childLastScroll>=20）{
childLastScroll-=20；
}否则{
childLastScroll=0；
}
}
}
$（'#scroll101'）.scrollTop（childlastcoll）；
lastScroll=currentScroll；
});
});
老实说，我会使用这个库：@Kiwad thnkx作为你的回应，我会在这里洗劫。