如何在完全进入视口后在页面底部粘贴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);

它将正常工作

如何在完全进入视口后在页面底部粘贴div？

How to stick div at bottom of page when it has completely entered the viewport?

jquery

html

css

sticky