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粘贴在页面底部？

1 个答案: