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. If the user selects Expand for the options.toggleAction, then it also adds an is-expanded class. 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

Depending on the type of toggle action you choose, below is example CSS you can use.

For Scroll

.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;
}

For Expand

An is-expanded class is added to the fixed sticky drawer container when a user clicks on the toggle so we can user the CSS transform to slide into view.

.sticky-drawer {
    position: relative;
}

/* We use the transform property to push drawer all the way down 100%
   but, bring it in view 150px */
.sticky-drawer.is-fixed {
    width: 100%;
    transform: translateY(calc(100% - 150px));
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding: 1rem;
}

/* Slide the drawer to the top */
.sticky-drawer.is-expanded {
    transform: translateY(0);
    top: 0;
    overflow: scroll;
}

.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