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

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