Skip to main content

Sticky Block

Make 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 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.go-to.js plugin.

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

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

Basic example

See, Terms with an example of a Sticky block.

            
              <div id="stickyBlockStartPoint">
                <nav class="js-sticky-block bg-primary rounded"
                     data-has-sticky-header="true"
                     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 ebd 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-has-sticky-header

 Informs the plugin whether there is a sticky header on the page, if there is, then it includes a function that determines the height of the element specified in the attribute data-offset-target and takes it into account for the correct operation of the plugin.

data-offset-target

 Determines the height of which element should be taken into account when calculating the start-point data-start-point.