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>
                  $(document).on('ready', function () {
                    // initialization of sticky blocks
                    $('.js-sticky-block').each(function () {
                      var stickyBlock = new HSStickyBlock($(this)).init();
                    });
                  });
                </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