约束一个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;所做的那样），但受formsdiv的限制。当页面加载时，两个div的顶面都对齐，一旦用户滚动到previewDiv在该代码中的位置，它就开始跟随屏幕，只会在其底面与forms底面匹配时停止。一个类似的例子是，"新询问"页面上的"类似问题"栏与页面的其他部分滚动，直到某个点，然后在屏幕上变为静态。

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