Bootstrap affix插件有时会在页面底部失败

Question

我需要修改订单摘要侧边栏，如图所示，侧边栏应如图所示停止，但有时会在页脚下方。

我正在使用Bootstrap 3.0.0附加插件修复我的opencart商店结帐页面边栏中的订单摘要。

       <script type="text/javascript">
            $(document).ready(function(){
                var headerHeight = $('header').outerHeight(true);
                var c =  $('.custom-footer').outerHeight();
                var f = $('.full-width').outerHeight();
                var footerHeight =c + f+ 60;
                $('#summary-div').affix({
                  offset: {
                    top: 270,
                    bottom: footerHeight // using bottom value like this  never always makes the order summary div to overlap the footer
                   //bottom :455 // I get affixed sidebar when i use bottom value as 455 but it sometimes overlaps the footer 
                  }
                }).on('affix.bs.affix', function() { // before affix
                  $(this).css({    
                    'width': $(this).outerWidth() // variable widths
                  });
                });
            });
        </script>
        <style type="text/css">
            #summary-div.affix{
              position: fixed;
              top: 0px;
              width: 28.8%;
            }
            .affix-top{
              position: static;
            }

            .affix-bottom{
              position:absolute;
              bottom:auto !important;
            }
        </style>

我已更新问题和图片。

Answer 1

试试这个：

检查工作演示 HERE

JS：

var headerHeight = $('header').outerHeight(true);
var footerHeight = $('footer').outerHeight() + 60;
$('#account-overview-container').affix({
  offset: {
    top: headerHeight,
    bottom: footerHeight
  }
}).on('affix.bs.affix', function() { // before affix
  $(this).css({    
    'width': $(this).outerWidth() // variable widths
  });
});