melt Sticky Drawer

All this module does is add an is-fixed class to the options.target container when it's in and out of view of the browser window. It is up to the themer to add the neccessary CSS styling to make the container fixed to the viewport. See example below of the HTML structure needed and the CSS that can be used.

Example

In order for the Sticky Drawer library to work, you'll need to have the following HTML structure with the following classes:

HTML

<div class="sticky-drawer-wrapper">
    <div class="sticky-drawer">

        <!-- CONTENT GOES HERE -->

        <button class="sticky-drawer-toggle"></button>
    </div>

</div>

CSS

.sticky-drawer {
    position: relative;
}

.sticky-drawer.is-fixed {
    width: 100%;
    height: 150px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding: 1rem;
}

.sticky-drawer-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

Configuration

Path: admin/config/melt_sticky_drawer/stickydrawer

You'll be able to configure the different classes/selectors along with the ability to choose which pages you don't want the code to be executed on.

Constructor

var stickyDrawer = new StickyDrawer(options);

Options

options.target

Type: string

Default: .sticky-drawer

CSS selector for the element we want to add the fixed class to.

options.targetWrapper

Type: string

Default: .sticky-drawer-wrapper

CSS selector for the element that wraps the target. We need this so the scroll event knows when to add and remove the fixed class.

options.toggle

Type: string

Default: .sticky-drawer-toggle

CSS selector to target the element that is acting as a the toggle to move the safety into view or scroll to the top of the window. Uses GSAP library to provide smooth scrolling.

options.fixedClass

Type: string

Default: .is-fixed

Class that gets added to the options.target when fixed.

Events

stickydrawer:toggle

Allows developers to manipulate the sticky drawer instance when user clicks the toggle button. This is particulary helpful when certain pages have sticky headers and you need modify the scrollToOffset to account for the height of the sticky header.

Example

$('.sticky-drawer-toggle').on('stickydrawer:toggle', function(event, stickydrawer){
  // Change the Sticky Drawers scrollToOffset to 100.
  stickydrawer.options.scrollToOffset = 100;
});

References

• Leverage the following article to add Page visibilty settings to the admin config form: https://www.previousnext.com.au/blog/using-drupal-8-condition-plugins-api