javascript - 将固定位置的 div 滚动到底部然后停止

Question

我想构建一个像 Facebook 或 Twitter 一样的页面，其中中间的 div 不定式滚动，左侧或右侧的 div 只滚动到它的 高度然后停在那里。

在我的网站中，我还在中间的 div 中显示不定式数据，在右侧显示一些 fixed 高度数据。我想 scroll 两个 div 和页面 scroll 和右边的 div 在达到它的高度并停留在那里时停止滚动。

我所做的是首先使其 position: static 并且当它到达右侧 div 的 bottom 时使其 fixed。但这不是我想要的，因为当我将 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>

js代码:

$(document).ready(function() {
  $(window).scroll(function() {
    var distanceFromTop = $(document).scrollTop();
    if (distanceFromTop >= $('#staticDiv').height()) {   
      $('#staticDiv').css({
        position: 'fixed'
      });
    } else { 
      $('#staticDiv').css({
        position: 'absolute'
      });
    }
  });
});

<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>//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 id="staticDiv" class="col-lg-3" style="height:200px;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>

$(document).ready(function() {
    $(window).scroll(function() {
        var distanceFromTop = $(document).scrollTop();
        if (distanceFromTop >= $('#staticDiv').height()) {   
            $('#staticDiv').css({
                position: 'fixed'
            });
        } else { 
            $('#staticDiv').css({
                position: 'absolute'
            });
        }
    });
});

我只想要右侧的 div 保持在底部并固定，而中间的 div 继续滚动。

Answer 1

我对代码做了一些修改。检查我的答案是否存在差异。希望对您有所帮助。

$(window).scroll(function() {
  var distanceFromTop = $(document).scrollTop();
  var h = $('#staticDiv').height()/2;
  if (distanceFromTop >= h) {
    $('#staticDiv').css({
      "position": "fixed",
      "top": "0px",
      "right": "0px"
    });
  } else {
    $('#staticDiv').css({
      "position": 'absolute',
      "top":"0px"
    });
  }
});

#staticDiv {
  height:200px;
  right:0px;
}

<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; position: relative;">
  <div class="col-lg-3" style="position:fixed;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>//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 id="staticDiv" class="col-lg-3" style="">//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>