简体   繁体   English

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

[英]Bootstrap affix plugin fails sometimes at the bottom of page

在此处输入图片说明 I need order summary sidebar to be fixed like the one in the picture attached the sidebar should stop as indicated in the picture but it goes below the footer sometimes.我需要像附加图片中的那样修复订单摘要侧边栏,侧边栏应该如图所示停止,但有时它会低于页脚。

I am using Bootstrap 3.0.0 affix plug-in to fix order summary in sidebar on checkout page of my opencart store.我正在使用 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>

I have updated the question and image.我已经更新了问题和图片。

Try this:尝试这个:

Check Working Demo HERE此处检查工作演示

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM