Web development standards have been modernized to solve this particular problem for newer browsers; however, for older browsers such as Internet Explorer 11, we cannot use modern methods. Therefore, we require a polyfill — a custom solution that lets us ensure a consistent experience across all supported browsers.

A sticky button is one that stays at the top of the page as a user scrolls down. They are a useful design features when you are designing a page that will have a lot of vertical content but you want to users to be able to quickly find the primary call-to-action button. For example, we implement these on shopping cart pages: as the user scrolls their cart contents, they are constantly prompted to move to the next step (ie the checkout).

The functionality for this feature is provided by jQueryExtras/jQuery.scStickyButton.js — a proprietary jQuery plugin. By default, it will only activate when the user’s screen’s width is less than 768 pixels.

Update the View

To implement this feature, you must do so as at the view-level first. If your view already has sticky buttons on it, you do not need to update the view and can skip to the next section.

First, you must add jQuery.scSticky as a dependency to your view.

Second, you must add a line to its showContent() method; if your view does not have already defined, you add one to look this:

showContent: function showContent () {
    var self = this;
    this.application.getLayout().showContent(this).done(function () {
        self.initPlugins();
    });
}

This creates a listener for when the main layout view has been rendered, which is the perfect time to execute this kind of jQuery code. We then call your view’s initPlugins() method, which you should define as follows:

initPlugins: function initPlugins () {
    this.$el.find('[data-action="sticky"]').scStickyButton();
}

This searches the view’s rendered HTML for elements with the sticky attribute and calls scStickyButton(), which is the initialization method for jQuery.scStickyButton to convert these elements into sticky buttons.

To enable this functionality, you will therefore need to mark up your desired elements in the view’s template.

Update the Template

You need to update the template to mark up the button you want to stick to the top of the page with the attribute we specified in the jQuery selector above.

For example:

<a class="some-button-class" data-action="sticky" href="some-path" data-hashtag="#">Sticky button!</a>

It is the data-action="sticky" attribute that is mandatory — the others can be as you wish. Also note that the term ‘button’ is used loosely in this case, as we don’t explicitly mean a button element but rather an anchor element acting as a button.