Bootstrap аффикс плагин не работает иногда в нижней части страницы

Question

Мне нужна сводная информация о заказе, которую нужно зафиксировать, как на картинке, прикрепленной к боковой панели, которая должна останавливаться, как указано на рисунке, но иногда она ниже нижнего колонтитула.

Я использую подключаемый модуль Bootstrap 3.0.0 affix для исправления сводки заказов в боковой панели на странице проверки моего магазина в 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 
    }); 
});