向下滾動固定位置div，然後停止

Question

我想要建立一個頁面，就像Facebook或Twitter，其中中間div滾動不定式，左或右div只滾動到其height，然後停在那裏。

在我的網站中，我也在右側顯示中間div和一些fixed高度數據中的不定數據。我想scroll兩個div與頁面scroll和右div停止滾動，當它達到其高度，並停留在那裏。

我所做的是先製作position: static，當它到達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' 
      }); 
     } 
    }); 
}); 

所有我想要的是右側格留在底部，而中間格保持滾動固定。

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>

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