javascript - Constrain a div to follow scroll but remain in bounds of another div -

javascript - Constrain a div to follow scroll but remain in bounds of another div -

i building web page form on 1 half of screen, , preview on other half remains in place user scrolls through form, alter values on form, preview next scroll changes. here code have far:

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

what want previewdiv follow user scroll (the way position: fixed;), remain constrained bounds of forms div. when page loads, both divs have top side aligned, , user scrolls previewdiv placed in code, begins follow screen, stop when it's bottom side matches forms bottom side. similar illustration way "similar questions" bar on new ask page scrolls rest of page until point, becomes static on screen.

i suggest add together js should trick.

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

javascript html