如何在完全進入視口時將div粘貼到頁面底部？

Question

我試圖實現以下內容：

我在我的頁面上的任何地方都有div。我想在完全進入視口時在頁面底部修復這個div。

我迄今爲止嘗試：

// section.js 

(function ($) { 
    'use strict'; 

    $(function() { 
     var sections = $('.js-section'); 

     sections.each(function() { 
      var section = $(this); 
      var sticky = section.hasClass('js-section-sticky'); 

      if (sticky) { 
       $(window).bind('scroll', function() { 
        var windowTop = $(window).scrollTop(); 
        var sectionTop = section.offset().top - section.height() - windowTop; 

        if (windowTop > sectionTop) { 
         section.addClass('section--fixed-bottom'); 
        } 
        else { 
         section.removeClass('section--fixed-bottom'); 
        } 
       }); 
       } 
     }); 
    }); 
})(window.jQuery); 

然而，目前部分出現爲時尚早。它立即出現，而不是完全進入視口。另外，如果我向上滾動，則消失得太晚。

Answer 1

我下面的代碼替換代碼

(function ($) { 
    'use strict'; 

    $(function() { 
     var sections = $('.js-section'); 

     sections.each(function() { 
      var section = $(this); 
      var sticky = section.hasClass('js-section-sticky'); 
      var sectionTop = section.offset().top + section.height(); 
      if (sticky) { 
       $(window).bind('scroll', function() { 
        var windowTop = $(window).scrollTop()+$(window).height(); 

        if (windowTop > sectionTop) { 
         section.addClass('section--fixed-bottom'); 
         section.next().css("margin-top", section.next().css("margin-top").replace("px", "") + section.height()); 
        } 
        else { 
         section.removeClass('section--fixed-bottom'); 
         var marginTop = section.next().css("margin-top").replace("px", "") - section.height(); 
         if(marginTop < 0) 
          marginTop*(-1); 
         section.next().css("margin-top", marginTop); 
        } 
       }); 
       } 
     }); 
    }); 
})(window.jQuery); 

它會正常工作