限制一個div跟隨滾動，但仍然在另一個div的邊界

Question

我正在用一個窗體在屏幕的一半上構建一個網頁，而在用戶滾動瀏覽窗體時另一半的預覽仍然存在，因此他們更改表單上的值，滾動更改後的預覽。這裏是我的代碼至今：

<div id="forms" style="float: left; text-align: center; margin-left: 0%; width: 50%; color: #ffffff; font-family: courier; size: 3;"> 
      <form enctype="text/plain" style="background-color: #ffffff; color: #000000; font-family: courier; size: 3;"> 
       <h2 style="color: #0000FF">Commission Form</h2> 
       <h3 style="color: #008c00">Main Shape</h3> 
       Shape:<select onchange="loadValues()" id="shapes"> 
        <option value="2" selected="selected">Crystal</option> 
        <option value="3">Cube</option> 
        <option value="6">Gear</option> 
        <option value="2">Gemstone</option> 
        <option vaslue="4">Honeycomb/option> 
        <option value="5">IcoStar</option> 
        <option value="3">Torus Knot</option> 
        <option value="1">Simple Gem</option> 
        <option value="1">Sphere</option> 
        <option value="3">Super Torus</option> 
        <option value="5">Terrain</option> 
        <option value="2">Torus</option> 
        <option value="4">Trapezohedron</option> 
        <option value="3">Twisted Torus</option> 
       </select><br> 
       Number of Main Shapes:<select onchange="loadValues()" id="shapeNumber"> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        <option value="4">4</option> 
       </select><br><br> 

       <h3 style="color: #008c00">"Plane"</h3> 
       "Plane"<input onclick="changeButton('plane')" type="button" value="No" id="plane"><br> 
       <select onchange="loadValues()" id="planeDim"> 
        <option value="4">2D</option> 
        <option value="8">3D</option> 
       </select><br><br> 

       <h3 style="color: #008c00">Extra Shape</h3> 
       "Extra Shapes"<input onclick="changeButton('extra')" type="button" value="No" id="extra"><br> 
       Shape:<select onchange="loadValues()" id="extrashapes"> 
        <option value="2" selected="selected">Crystal</option> 
        <option value="3">Cube</option> 
        <option value="6">Gear</option> 
        <option value="2">Gemstone</option> 
        <option vaslue="4">Honeycomb/option> 
        <option value="5">IcoStar</option> 
        <option value="3">Torus Knot</option> 
        <option value="1">Simple Gem</option> 
        <option value="1">Sphere</option> 
        <option value="3">Super Torus</option> 
        <option value="5">Terrain</option> 
        <option value="2">Torus</option> 
        <option value="4">Trapezohedron</option> 
        <option value="3">Twisted Torus</option> 
       </select><br> 
       Number of Extra Shapes: <select onchange="loadValues()" id="extraNumber"> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        <option value="4">4</option> 
        <option value="5">5</option> 
        <option value="6">6</option> 
        <option value="7">7</option> 
        <option value="8">8</option> 
        <option value="9">9</option> 
        <option value="10">10</option> 
       </select> 
      </form> 
    </div> 
    <div id="previewDiv" style="position: fixed; left: 70%; right: 0%; bottom:20px; width: 200px; height: 200px; color: #ffffff; font-family: courier; size: 3;"> 
      <canvas id="preview" width="200" height="200"> 
    </div> 
    <script id="previewDraw"> 
     var c = document.getElementById("preview"); 
     var g = c.getContext("2d"); 
     g.fillStyle = "#FFFFFF"; 
     g.fillRect(0, 0, 200, 200); 
    </script> 

我想previewDiv做的就是跟隨用戶，因爲他們滾動（它與position: fixed;的方式做），但保持在forms div的邊界限制什麼。當頁面加載時，兩個div的頂端對齊，並且只要用戶滾動到此代碼中放置的previewDiv的位置，它就開始跟隨屏幕，只在底部與底部的forms匹配時停止側。一個類似的例子是New Ask頁面上的「類似問題」欄與頁面的其餘部分一起滾動直到某個點，然後在屏幕上變爲靜態。

Answer 1

我建議你把它添加到你的js它應該做的伎倆。

window.onload = function(){ 

    var forms = document.querySelector('#forms'); 
    var previewDiv = document.querySelector('#previewDiv'); 
    var previewDivHeight = previewDiv.offsetHeight; 
    var topBound = forms.offsetTop; 
    var bottomBound = forms.offsetTop + forms.offsetHeight; 
    window.onscroll = function(e) { 
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; 
    if(scrollTop > topBound && scrollTop < (bottomBound - previewDiv.offsetHeight)) 
    { 
     previewDiv.style.position = 'fixed'; 
     previewDiv.style.top = 0; 
    } 
    else 
    { 
     if(scrollTop < topBound) 
     { 
     previewDiv.style.position = 'absolute'; 
     previewDiv.style.top = topBound + 'px'; 

     } 
     else 
     { 
     if(scrollTop > bottomBound - previewDiv.offsetHeight) 
     { 
      previewDiv.style.position = 'absolute'; 
      previewDiv.style.top = (bottomBound - previewDiv.offsetHeight) + 'px'; 
     } 
     } 
    } 
    } 
}