HTML 滚动上的jQuery Sticky Nav

Posted 2021-05-24

<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>

<style>
#sticky {
  width: 600px;
  }
#sticky.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  }
</style>

<script type="text/javascript">

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top)
    $('#sticky').addClass('stick')
  else
    $('#sticky').removeClass('stick');
  }
// If you have jQuery directly, use the following line, instead
// $(function() {
// If you have jQuery via Google AJAX Libraries
google.setOnLoadCallback(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
  });

</script>

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

 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>