How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

        
          <script src="../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
        
      

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

        
          <script>
            (function() {
              // INITIALIZATION OF STICKY BLOCKS
              // =======================================================
              new HSStickyBlock('.js-sticky-block', {
                targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
              })
            });
          </script>
        
      

Example

        
          <!-- Sticky Block -->
          <div id="stickyBlockStartPoint">
            <nav class="js-sticky-block bg-primary rounded"
                 data-hs-sticky-block-options='{
                   "parentSelector": "#stickyBlockStartPoint",
                   "breakpoint": "lg",
                   "startPoint": "#stickyBlockStartPoint",
                   "endPoint": "#stickyBlockEndPoint",
                   "stickyOffsetTop": 20,
                   "stickyOffsetBottom": 20
                 }'>
              Example text ...
            </nav>
          </div>
          <!-- End Sticky Block -->

          <!-- Sticky Block End Point -->
          <div id="stickyBlockEndPoint"></div>
        
      

Methods