html 边栏固定到页脚，然后滚动 - 通过HC-Sticky

Posted 2021-05-11

 body { padding-top: 80px; }
 .left { width: 70%; float: left; }
 .sidebar {
   width: 30%; float: left;
   height: calc(100vh - 80px); 
 }

jQuery(document).ready(function($){

  $('.sidebar').hcSticky({
    top: 80 //ALTURA DEL HEADER FIXED
  });
  
  //Ojo por ejemplo si estamos usando tabs de bootstrap o similar, para que recalcule los widths al cambiar de tab:
  
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $(".js-sticky").hcSticky('reinit');
  });
          
});

Github: https://github.com/somewebmedia/hc-sticky
Info: http://someweblog.com/hcsticky-jquery-floating-sticky-plugin/
Demos: http://someweblog.com/demo/hcsticky/

<div class="header"> <!-- vamos a suponer que esta fixed y con 80px alto -->
</div>

<div class="wrapper">
  <div class="left"> ...aqui el contenido que scrollea... </div>
  <div class="sidebar"> ...aqui el sidebar fixed... </div>
</div>

<div class="footer">
</div>