javascript - makes sticker div stop just above the footer on scroll - document.outerHeight give wrong results -

css

.stick{position: fixed !important;} 

sticker div id="summary-div"

<div class="col-sm-8"><!-- div has 4 accordions div--></div> <div class="col-sm-4">     <div>         <div>              <div>                   <div id="order_summary">                        <div id="summary-div"></div>                   </div>              </div>         </div>     </div> </div> 

footer

<div class="container-fluid" id="stickendplace"></div> 

the below jquery code making stick , unstick stickermax calculated dynamically determine css property top stick or unstick right above footer. but, problem is; have give static values of scenarios "stickermax" variable pretty fit above footer otherwise, coming little below or little above footer having id of "stickendplace". please, help. thanks

    var s = $("#summary-div");     var pos = s.position();     var stickermax = $(window).outerheight() - $("#stickendplace").outerheight() - s.outerheight();     $(window).scroll(function() {         var windowpos = $(window).scrolltop();             if (windowpos >= pos.top && windowpos < stickermax) {                 $("#summary-div").addclass("stick"); //stick                 $("#summary-div").css("top",""); //kill top css property sets while unsticking             } else if (windowpos >= stickermax) {                 $("#summary-div").removeclass("stick"); //un-stick                 $("#summary-div").css({top: stickermax + "px"}); //set sticker right above footer             } else {                $("#summary-div").removeclass("stick"); //top of page            }   }); 

problem

the actual problem coming line of code.

var stickermax = $(window).outerheight() - $("#stickendplace").outerheight() - s.outerheight(); 

this "stickermax" value not coming correctly scroll div go below inside footer , stops above footer. how fix "stickermax" because dynamic "top" css property making sticker div positioning.