Question

我想构建一个类似于Facebook或Twitter的页面，其中中间div滚动不定式，左或右div仅滚动到其height然后停在那里。

在我的网站上，我还在中间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 code：

＆＃13;

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

＆＃13;

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

＆＃13;

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

我对代码做了一些更改。检查我的答案差异。我希望它有所帮助。

＆＃13;

$(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"
    });
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我找到了解决办法。 Thnkx为你的回应。

在此发布我的解决方案bcoz欢迎提供更多建议

$(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;
});
});

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

2 个答案: