Bootstrap 修复插件有时在页面底部失败的问题

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
  });
});

Bootstrap 修复插件有时在页面底部失败的问题

Bootstrap affix plugin fails sometimes at the bottom of page

html

css

jquery

twitter-bootstrap

affix