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 MyTravel 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.
Contact Us