Sticky Block

This is for making any block floating on your page.

Overview

Sticky block is a plugin for making smart and high performance sticky blocks. It also works with block if it's taller or shorter than the viewport. Integrated with resize sensor to re-calculate the dimensions automatically when the size of sidebar block or its container is changed and responsive features are available for you to choose, in which breakpoint is to break.

How to use?

Wrap any block in a parent element with an ID or class and add the same ID in the JS init function of the hs.sticky-block.js plugin.

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

                
                  <script src="../../assets/js/components/hs.sticky-block.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
                      $.HSCore.components.HSStickyBlock.init('.js-sticky-block');
                    });
                  </script>
                
              

Basic example

See, FAQ with an example of a Sticky block.

                
                  <div id="stickyBlockStartPoint">
                    <nav class="js-sticky-block bg-primary rounded"
                         data-parent="#stickyBlockStartPoint"
                         data-offset-target="#logoAndNav"
                         data-sticky-view="lg"
                         data-start-point="#stickyBlockStartPoint"
                         data-end-point="#stickyBlockEndPoint"
                         data-offset-top="20"
                         data-offset-bottom="20">
                      Example text ...
                    </nav>
                  </div>

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

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-start-point="".