Bootstrap 词缀插件有时在页面底部失败答案

【问题标题】：Bootstrap affix plugin fails sometimes at the bottom of pageBootstrap 词缀插件有时在页面底部失败
【发布时间】：2016-09-19 20:17:46
【问题描述】：

我需要修复订单摘要侧边栏，就像所附图片中的那样，侧边栏应该如图所示停止，但有时它会低于页脚。

我正在使用 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>

我已经更新了问题和图片。

【问题讨论】：

尝试将 $('.custom-footer').outerHeight(true) 设置为词缀外的变量。我想知道 JS 是否跟不上试图快速返回该高度参数的浏览器。
@crazymatt 你现在可以看看我添加了一张图片并更改了我的问题的详细信息以更详细地说明它，请帮助
不可能用所提供的小代码来判断问题所在。无论如何，您可以在js.fiddle 中重现该问题或提供更多代码？您是否也尝试过在 HTML 中添加代码而不是通过 JS，只是为了看看问题是否仍然存在？
@crazymatt 我无法在 js.fiddle mdpocket.com 中实现该问题，这是商店的网站。我请求您先生，请为我努力并去网站注册一个帐户并在购物车中添加一些物品并转到结帐页面。请建议我如何使订单摘要侧边栏浮动。 P.S：在实时网站上，我没有为浮动侧边栏实现任何代码。我只是想让你去网站看看你能不能弄清楚一些事情。先生，这将是一个很大的帮助
连一行源代码都没有！！！你期望如何给出答案！！！

标签： jquery html css twitter-bootstrap affix

【解决方案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
  });
});

【讨论】：

我已经更改了图像，它显示了我得到的问题加上我使用了你的代码它也有同样的问题，
我需要订单摘要处于水平或左侧 div 中，我得到了这个，但有时订单摘要 div 与页脚重叠。不知道是什么原因
@harronejaz 尝试使用最新版本的引导程序。在演示中它工作正常。
我有 bootstrap 3.0.0 并且不允许更改版本，还有其他想法吗？
尝试设置body{ position:relative;}