Sticky Block

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>
            
          

JavaScript behavior

Methods

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

Attribute	Description
data-start-point	Determines when a block reaches the start point that is specified in the value, the block begins to become fixed.
data-end-point	Determines when a block reaches the point end that is specified in the value, the block begins to become If the end point is unknown or the content is smaller than sticky block content, data-end-point should be set to 999999.
data-offset-top	Determines the space (in pixels) from the top of the visible area. Sticky block will not work if there is no value. At least 0 value should be set.
data-offset-bottom	Determines the space (in pixels) from the bottom of the visible area. Sticky block will not work if there is no value. At least 0 value should be set.
data-sticky-view	Responsive feature. Determines with which media breakpoint the stick block will work. Stick block becomes static below the given resolution.
data-parent	To indicate the parent sticky block for better manipulation with it.
data-offset-target	Determines the height of which element should be taken into account when calculating the start-point data-start-point.