Sticky Block

This is for making any block floating on your page.

How to use?

Copy-paste the following <script> near the end of your pages under JS Front 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>
              
            

Basic example

              
                <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>

                <div id="stickyBlockEndPoint"></div>
              
            

Extend

By assigning a variable, you can call the standard methods of the plugin:

              
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF STICKY BLOCK
                    // =======================================================
                    $('.js-sticky-block').each(function () {
                      var stickyBlock = new HSStickyBlock($(this)).init();
                    });
                  });
                </script>
              
            

Attributes

By assigning a variable, you can call the standard methods of the plugin:

              
                data-hs-sticky-block-options='{
                 ...
              }' - array
              
            

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-sticky-block-options='{}'.