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

JavaScript behavior

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

Parameters Description Default value

parentSelector

Defines the parent element null

targetSelector

Determines the height of which element should be taken into account when calculating the startPoint null

stickyOffsetTop

Determines the distance above the edge of the visible area 0

stickyOffsetBottom

Determines the distance below the edge of the visible area 0

startPoint

Determines upon reaching which block specified in the value, the sticks the block begins to become fixed null

endPoint

Determines upon reaching which block specified in the value, the sticks the block ceases to be fixed. If the stick does not have a breakpoint, then set the value to 9999999, that is, the maximum possible page height null

breakpoint

Determines with what permission the plugin is initialized. Resolution Map corresponds to Bootstrap 4 'lg'