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='{}'.