div를 구속하지만 다른 div의 경계에 남음

Question

화면의 절반에 양식이있는 웹 페이지를 작성하고 사용자가 양식을 스크롤 할 때 나머지 절반에 미리보기가 남아 있습니다. 그래서 폼의 값을 변경하면 미리보기가 스크롤 변경에 따라 변경됩니다. 나는 previewDiv들이 (이 position: fixed;으로 수행 방식)을 스크롤 할 때 사용자를 따라 할 일은 있지만, forms 사업부의 경계에 의해 제약을 유지하려면 무엇

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

: 여기에 지금까지 가지고있는 코드입니다. 페이지가로드되면 양쪽 div의 윗면이 정렬되고 사용자가이 코드에 previewDiv이있는 곳으로 스크롤하면 바로 아래쪽이 forms 하단과 일치 할 때만 화면을 따라 가기 시작합니다 측면. 비슷한 예가 New Ask 페이지의 "Similar Questions (유사 질문)"막대가 특정 지점까지 페이지의 나머지 부분과 함께 스크롤 한 다음 화면에서 정적이되는 방식입니다.

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