如果div的底部和屏幕匹配，则将div粘在屏幕上

Question

Hello all I am working on a project where in a page I have to stick the div to screen (disable scrolling) when its bottom is at the bottom of screen. I have two divs in the page and both the divs are of variable height. I want to stick the div2 and scroll the div1.

<script>
  var divheight
  var scrolltop
  var screenheight
  if(divheight-scrolltop <= screenheight){ 
  /* now stick the div wherever it is i can not 
  use fixed position as both the divs are floating and
   fixing the position will make it to change the position*/ } 
   else { /*un stick the div*/ }
 </script>

i dont know what to put in if and else please help me

Answer 1

Make a function which fire on scroll. The main aim of the function would be to see the difference between screen height and bottom of the div. Once the difference is less than or equal to zero modify the css position to fixed. This will help you

(function ($) {
  $('.DIV1').scroll(function () {
    var $this = $(this),
        win_ht = $(window).height(),
        div_ht = $this.height(),
        div_bot = $this.offset().top + div_ht;
    if (win_ht - div_bot <= 0) {
        $this.css({
            'position': 'fixed',
            'bottom': '0'
        })
    }
  });
})(jQuery);