javascript - Creating a floating box which stays within a div -

I'm trying to create a div 'floator' which works like a fixed divis scrolling), but when It rotates the boundaries of the divis, then it becomes stationary.

When the scrollbar is at the top, then the div should be placed in that compartment in the 100 pixels from the top) and when the scrollbar reaches the bottom, then it will allow Flater to contain the container Should stop from going out The height of the floater will be fixed, but the height of the container will be dynamic.

I have seen all such places, but I can not figure out how to find a good example for this.

If possible, I would like to avoid jQuery, because I think it only requires a few simple javascript, so it can be determined that it is in the current position relative to that div .

Thank you.

OK, there is a complete solution here I have tested it only in Firefox and IE, but it Should work on the board (I think) It is directly Javascript and the use of jQuery is not The first JS function ensures that the height works in different browsers.

Edit - I improved it, see below.

  & lt; Html & gt; & Lt; Top & gt; & Lt; Style type = "text / css" & gt; * {Margin: 0; Padding: 0;} # headers {height: 300px width: 100%; Background: # 888;} # High (height: 800 px; width: 70%; background: #I; float: left;) #in (width: 30%; height: auto; background: # pin; float: left) ; Position: relative;} #flater {height: 400px; width: 90%; background: #dcd; top: 0px; position: full;} #footer {height: 300px; width: 100%; background: # 888 ; Clear: both;}  gt; script & gt; function getPageY () {var height = 0; if (type.conf (window.pageYOffset) == 'number') {height = window PageYOffset;} and if (docume Nt.body & document.body.scrollTop) {height = document.body.scrollTop;} and if (document.documentElement & amp; document. documentElement.scrollTop) {height = document.documentElement.scrollTop; } Return height;} Onload = function () {window.onscroll = scroll; function scrolls () {ybox.value = "this:" + getPageY (); var f = document.getElementById ("flator"); var y = GetPageY () - 300; // minus header height var divh = document.getElementById ("main"). OffsetHeight; If (divh> 400) {// Floater height greater than diva - = 400; // Flator height with zero if (y & lt; 0) y = 0; And if (Y> divh) y = divh; F.style.top = y + "px"; }} & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "header" & gt; & Lt; / Div & gt; & Lt; Div id = "main" & gt; & Lt; / Div & gt; & Lt; Div id = "side" & gt; & Lt; Div id = "floater" & gt; Float content & lt; Br / & gt; & Lt; Input name = "ybox" id = "ybox" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "footer" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;   
 It works, but with images it is extremely bouncing I have modified it to use a certain position when it should be stuck in position. Change the three matching lines with a smooth result for this:  
  If (y <0) {y = 0; F.style.position = "absolute";} and if (y> divh) {y = divh; F.style.position = "Done"; F.style.top = divh "" px ";} other {f.style.position =" fixed "; f.style.top = 0;}