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底部。{{1}}类似的例子是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';
        }
      }
    }
  }
}

约束div以跟随滚动但仍保留在另一个div的边界内

1 个答案: