<div class="header"><h1>Sticky on Scroll</h1></div>
<main class="container">
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consectetur eu justo id dignissim. Sed nec semper mi, vel pulvinar eros. Integer at pulvinar leo, a faucibus velit. Mauris rutrum felis nec ipsum mollis aliquet. Sed mattis eros in eros condimentum, tincidunt efficitur nibh sollicitudin. Suspendisse pretium vel mauris sed vestibulum. Maecenas magna lectus, eleifend sed nisi molestie, fringilla tincidunt nibh. Mauris ut arcu hendrerit, vehicula ligula vitae, auctor nisl. Etiam luctus orci vitae imperdiet tristique. Praesent pulvinar elementum sapien in pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

  <p>Duis eu rutrum nisl, ac tristique tellus. Quisque fringilla ipsum sem, vitae suscipit urna faucibus quis. Morbi porttitor magna et massa pharetra hendrerit. Mauris tempus orci dolor, vel feugiat ipsum condimentum et. Vivamus nisi metus, convallis vitae finibus sed, sollicitudin nec felis. Donec quis pharetra sapien. Sed fringilla diam eget nulla ultricies sodales. Nulla dapibus fermentum lectus, eget hendrerit neque feugiat consequat. Nunc nec laoreet nisl. Fusce quis mollis ante. Morbi id augue maximus, euismod turpis quis, accumsan nunc.</p>
  
  <p>Vestibulum imperdiet, nulla eu dictum consectetur, elit urna ornare tellus, ultricies gravida odio diam sed neque. Duis neque arcu, auctor vel sodales eget, rutrum nec erat. Pellentesque vulputate maximus mauris, a elementum ante vehicula ac. Nam euismod euismod sollicitudin. Ut vestibulum luctus sapien. Duis nec lorem non enim varius faucibus. In ultrices posuere imperdiet. Nulla vel placerat tellus. Duis viverra tincidunt nisl sed laoreet. Mauris blandit sem aliquet suscipit aliquam. Vestibulum sem nunc, gravida eu tempus vel, laoreet et arcu.</p>
  
  <p>Vivamus at cursus ante. Proin in laoreet ligula. Fusce sed porta dui. Integer pellentesque mi eu dolor consectetur dapibus. Morbi ac mauris ut libero condimentum ultrices. Vestibulum viverra leo eu lectus iaculis congue. Donec ornare tempus ultricies. Etiam sit amet nibh lorem. Donec ut pretium mauris. Morbi vestibulum iaculis augue, id cursus mauris aliquam ut. Nam dictum nunc nec consectetur tristique. Sed dolor elit, consequat eu metus vel, fringilla sagittis quam. Quisque pretium dolor erat, ut porta magna tempor quis.</p>
  
  <p>Nulla suscipit risus porttitor congue tincidunt. Ut dapibus enim eu quam pharetra consectetur. Proin a purus felis. Curabitur consectetur turpis id ipsum lobortis malesuada. Donec in mi vel turpis vestibulum facilisis. Phasellus placerat fringilla congue. Curabitur posuere pharetra aliquam. Donec metus quam, condimentum nec rutrum sed, rhoncus sed eros. Praesent quis ante cursus, sodales mi vel, semper orci. Cras aliquam risus in libero volutpat molestie. Sed dictum mauris id vehicula vehicula. Cras hendrerit est id libero maximus, at ultricies felis tempus. Proin semper hendrerit dolor, quis efficitur tortor ultrices eget. Morbi massa diam, viverra non luctus consectetur, euismod a leo. Donec porttitor quam sapien, interdum varius purus condimentum sagittis.</p>
  
  <p>Sed egestas ligula non velit cursus, id sagittis augue ultricies. Donec nec vestibulum dui. Duis non sapien accumsan risus feugiat tempor. Vivamus eleifend rhoncus odio, eget bibendum est auctor non. Vestibulum ornare quis erat non molestie. Aliquam sed lorem turpis. Donec urna augue, ultricies luctus congue id, scelerisque nec ex. Donec aliquet interdum justo in cursus.</p>
  
  <p>Proin est lacus, sollicitudin eu tincidunt eget, viverra in purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ac leo est. Nunc tellus dolor, semper ut elit sit amet, ultrices finibus elit. Curabitur et justo enim. Sed justo nisl, sagittis id augue non, eleifend rhoncus lacus. Curabitur molestie nisl sit amet sem aliquet egestas. Sed neque sem, porttitor sed nulla vel, accumsan luctus purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed iaculis non eros vel vulputate. Nunc tempus sodales metus vitae pharetra. Aenean euismod libero nec felis dapibus, elementum aliquam ex iaculis. Maecenas a lobortis velit. In hac habitasse platea dictumst. Morbi ante eros, blandit vel efficitur quis, euismod vel ipsum.</p>
  
  <p>Etiam quis lectus ornare dui scelerisque ultrices a ac magna. Sed molestie lorem ac molestie ultricies. In hac habitasse platea dictumst. Integer in lorem ac magna pulvinar maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec eros enim, tristique quis lacus et, dictum vulputate nisi. Donec finibus dui vel malesuada auctor. Morbi vitae felis tristique, rhoncus turpis in, lacinia dolor.</p>
  
  <p>Fusce ut maximus sapien, nec egestas lectus. Ut purus turpis, dignissim commodo metus et, laoreet condimentum nisi. Sed in commodo eros. Fusce sagittis venenatis neque, nec maximus ante dignissim nec. Nulla iaculis porta orci vitae fringilla. Morbi luctus augue nisi, non venenatis nunc mollis at. Vestibulum fringilla sagittis erat, id varius felis porta vel. Nullam non euismod justo. In vitae erat at magna congue laoreet id id nunc. Vivamus non aliquet libero. Vestibulum leo est, finibus nec venenatis ut, varius a nisl. Phasellus eleifend ut est vitae egestas. Cras vehicula massa orci. Fusce tellus velit, sodales a lorem at, fermentum consectetur elit. Sed ac risus eget nisl rutrum bibendum at sed nisl.</p>
  
  <p>Vivamus vitae tincidunt risus. Sed posuere velit ex, vel finibus urna suscipit a. Nulla iaculis viverra quam, ornare mattis mi ultricies non. Integer ut nisl pretium urna convallis porta in ac tortor. Proin at luctus odio, gravida aliquam quam. Ut luctus leo eget ex viverra, nec facilisis magna tincidunt. Vivamus venenatis suscipit leo a imperdiet. Vivamus placerat hendrerit lectus ac aliquet. Nullam consequat vel mi tincidunt hendrerit. Nam euismod mi tellus, ut consequat ex tristique sit amet. Fusce eu sodales arcu, vel hendrerit ante.</p>

  <div class="element">
    <div style="display: none">
      <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <symbol id="email" viewBox="0 0 64 64">
          <path d="M32 35.077l18.462-16h-36.924zM27.013 33.307l4.987 4.091 4.909-4.093 13.553 11.617h-36.924zM12.307 43.693v-23.386l13.539 11.693zM51.693 43.693v-23.386l-13.539 11.693z"></path>
        </symbol>
        <symbol id="facebook" viewBox="0 0 64 64">
          <path d="M27.397 53.72v-19.723h-6.647v-8.052h6.647v-6.762c0-4.918 3.987-8.904 8.904-8.904h6.949v7.24h-4.972c-1.563 0-2.829 1.267-2.829 2.829v5.597h7.677l-1.061 8.052h-6.616v19.723z"></path>
        </symbol>
        <symbol id="twitter" viewBox="0 0 64 64">
          <path d="M49.92 20.885c-1.23 0.56-2.656 0.968-4.152 1.15l-0.071 0.007c1.52-0.921 2.663-2.335 3.218-4.016l0.015-0.052c-1.344 0.812-2.908 1.431-4.575 1.768l-0.094 0.016c-1.343-1.431-3.247-2.322-5.358-2.322-0.003 0-0.006 0-0.009 0h0.001c-4.061 0-7.353 3.292-7.353 7.352 0 0.576 0.065 1.138 0.19 1.676-6.111-0.307-11.529-3.234-15.155-7.683-0.626 1.056-0.996 2.328-0.996 3.686 0 0.004 0 0.008 0 0.012v-0.001c0 0.002 0 0.004 0 0.006 0 2.539 1.287 4.777 3.245 6.098l0.026 0.017c-1.228-0.040-2.37-0.376-3.367-0.939l0.037 0.019c-0.001 0.031-0.001 0.061-0.001 0.093 0 3.563 2.535 6.534 5.899 7.21-0.579 0.164-1.245 0.258-1.933 0.258-0.491 0-0.971-0.048-1.435-0.14l0.047 0.008c0.936 2.921 3.651 5.047 6.869 5.106-2.482 1.962-5.657 3.148-9.108 3.148-0.008 0-0.017 0-0.025 0h0.001c-0.002 0-0.004 0-0.006 0-0.616 0-1.223-0.037-1.82-0.11l0.072 0.007c3.18 2.071 7.071 3.303 11.25 3.303 0.008 0 0.015 0 0.023 0h-0.001c13.525 0 20.921-11.204 20.921-20.921 0-0.319-0.008-0.636-0.022-0.951 1.445-1.052 2.662-2.313 3.635-3.753l0.034-0.053z"></path>
        </symbol>
      </defs>
    </svg>
    </div>
    
    <div class="social-sharing-buttons">
      <a href="#" target="_blank" title="Share to Facebook" aria-label="Share to Facebook" class="social-sharing-buttons__button" rel="noopener">
        <svg width="16px" height="16px" style="border-radius:0px;">
          <use href="#facebook"></use>
        </svg>
      </a>
        
      <a href="#" target="_blank" title="Share to Twitter" aria-label="Share to Twitter" class="social-sharing-buttons__button" rel="noopener">
        <svg width="16px" height="16px" style="border-radius:0px;">
          <use href="#twitter"></use>
        </svg>
      </a>
      
      <a href="#" title="Share to E-mail" aria-label="Share to E-mail" class="social-sharing-buttons__button" target="_blank" rel="noopener">
        <svg width="16px" height="16px" style="border-radius:0px;">
          <use href="#email"></use>
        </svg>
      </a>
    </div>
  </div>
</div>
</main>
/* App styles */
html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.header {
  padding: 36px 72px;
  background: lightgray;
}

.content {
  line-height: 1.4;
  padding: 36px 72px;
  padding-left: 72px;
  position
}

p:first-child {
  margin-top: 0;
}

.element a {
  display: block;
  text-decoration: none;
  width: 44px;
  height: 44px;
  background: black;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.element svg {
  fill: white;
  width: 32px;
  height: 32px;
}

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 36px;
}
/**
 * jquery.stickOnScroll.js
 * A jQuery plugin for making element fixed on the page.
 *
 * Created by Paul Tavares on 2012-10-19.
 * Copyright 2012 Paul Tavares. All rights reserved.
 * Licensed under the terms of the MIT License
 *
 */

;(function(factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(jQuery);
    }
}(function($){

    "use strict";
    /*jslint plusplus: true */
    /*global $,jQuery */

    var
        // Check if we're working in IE. Will control the animation
        // on the fixed elements.
        isIE = ($.support.optSelected === false ? true : false),

        // List of viewports and associated array of bound sticky elements
        viewports = {},

        // Local variable to hold methods
        fn = {};

    /**
     * Function bound to viewport's scroll event. Loops through
     * the list of elements that needs to be sticked for the
     * given viewport.
     * "this" keyword is assumed to be the viewport.
     *
     * @param {eventObject} jQuery's event object.
     *
     * @return {Object} The viewport (this keyword)
     *
     */
    function processElements(ev) {

        var elements = viewports[$(this).prop("stickOnScroll")],
            i,j;

        // Loop through all elements bound to this viewport.
        for( i=0,j=elements.length; i<j; i++ ){

            // Scope in the variables
            // We call this anonymous funnction with the
            // current array element ( elements[i] )
            (function(o){

                var scrollTop,
                    maxTop,
                    cssPosition,
                    footerTop,
                    eleHeight,
                    yAxis;

                // get this viewport options
                o = elements[i];

                // FIXME: Should the clean up of reference to removed element store the position in the array and delete it later?

                // If element has no parent, then it must have been removed from DOM...
                // Remove reference to it
                if (o !== null) {

                    // jquery contains works on dom object; not jquery selections
                    if (!$.contains(document.documentElement, o.ele[0])) {

                        elements[i] = o = null;

                    }

                }
                if (o !== null) {

                    // Get the scroll top position on the view port
                    scrollTop   = o.viewport.scrollTop();

                    // set the maxTop before we stick the element
                    // to be it's "normal" topPosition minus offset
                    maxTop      = o.getEleMaxTop();

                    // TODO: What about calculating top values with margin's set?
                    // pt.params.footer.css('marginTop').replace(/auto/, 0)

                    // If not using the window object, then stop any IE animation
                    if (o.isWindow === false && isIE) {
                        o.ele.stop();
                    }

                    // If the current scrollTop position is greater
                    // than our maxTop value, then make element stick on the page.
                    if (scrollTop >= maxTop){

                        cssPosition = {
                            position:   "fixed",
                            top:        ( o.topOffset - o.eleTopMargin )
                        };

                        if (o.isWindow === false) {

                            cssPosition = {
                                position:   "absolute",
                                top:        ( ( scrollTop + o.topOffset ) -  o.eleTopMargin )
                            };

                        }

                        o.isStick = true;

                        // ---> HAS FOOTER ELEMENT?
                        // check to see if it we're reaching the footer element,
                        // and if so, scroll the item up with the page
                        if  (o.footerElement.length) {

                            // Calculate the distance from the *bottom* of the fixed
                            // element to the footer element, taking into consideration
                            // the bottomOffset that may have been set by the user.
                            footerTop   = o.getEleTopPosition(o.footerElement);
                            eleHeight   = o.ele.outerHeight();
                            yAxis       = ( cssPosition.top + eleHeight +
                                            o.bottomOffset + o.topOffset );

                            if (o.isWindow === false) {

                                yAxis = (eleHeight + o.bottomOffset + o.topOffset);

                            } else {

                                yAxis = ( cssPosition.top + scrollTop +
                                          eleHeight + o.bottomOffset );

                                footerTop = o.getElementDistanceFromViewport(o.footerElement);

                            }

                            // If the footer element is overstopping the sticky element
                            // position, then adjust it so that we make room for the
                            // fotoer element.
                            if (yAxis > footerTop) {

                                if (o.isWindow === true) {

                                    cssPosition.top = (
                                            footerTop - ( scrollTop + eleHeight + o.bottomOffset )
                                        );

                                // Absolute positioned element
                                } else {

                                    cssPosition.top = (scrollTop - (yAxis - footerTop));

                                }

                            }

                        }

                        // If o.setParentOnStick is true, then set the
                        // height to this node's parent.
                        if (o.setParentOnStick === true) {

                            o.eleParent.css("height", o.eleParent.height());

                        }

                        // If o.setWidthOnStick is true, then set the width on the
                        // element that is about to be Sticky.
                        if (o.setWidthOnStick === true) {

                            o.ele.css("width", o.ele.css("width"));

                        }

                        // If we have additional stick offset, apply it now
                        if (!o.isViewportOffsetParent) {

                            cssPosition.top = (
                                cssPosition.top - o.getElementDistanceFromViewport(o.eleOffsetParent)
                            );

                        }

                        // Stick the element
                        if (isIE && o.isWindow === false) {

                            o.ele
                                .addClass(o.stickClass)
                                .css("position", cssPosition.position)
                                .animate({top: cssPosition.top}, 150);

                        } else {

                            o.ele
                                .css(cssPosition)
                                .addClass(o.stickClass);

                        }

                        // If making element stick now, then trigger
                        // onStick callback if any
                        if (o.wasStickCalled === false) {

                            o.wasStickCalled = true;

                            setTimeout(function(){

                                if (o.isOnStickSet === true) {

                                    o.onStick.call(o.ele, o.ele);

                                }

                                o.ele.trigger("stickOnScroll:onStick", [o.ele]);

                            }, 20);

                        }

                    // ELSE, If the scrollTop of the view port is
                    // less than the maxTop, then throw the element back into the
                    // page normal flow
                    } else if (scrollTop <= maxTop) {

                        if (o.isStick) {

                            // reset element
                            o.ele
                                .css({
                                    position: "",
                                    top: ""
                                })
                                .removeClass(o.stickClass);

                            o.isStick = false;

                            // Reset parent if o.setParentOnStick is true
                            if (o.setParentOnStick === true) {

                                o.eleParent.css("height", "");

                            }

                            // Reset the element's width if o.setWidthOnStick is true
                            if (o.setWidthOnStick === true) {

                                o.ele.css("width", "");

                            }

                            o.wasStickCalled = false;

                            setTimeout(function(){

                                // Execute the onUnStick if defined
                                if (o.isOnUnStickSet) {

                                    o.onUnStick.call( o.ele, o.ele );

                                }

                                o.ele.trigger("stickOnScroll:onUnStick", [o.ele]);

                            }, 20);

                        }
                    }

                    // Recalculate the original top position of the element...
                    // this could have changed from when element was initialized
                    // - ex. elements were inserted into DOM. We re-calculate only
                    // if the we're at the very top of the viewport, so that we can
                    // get a good position.
                    if (scrollTop === 0) {

                        o.setEleTop();

                    }

                }// is element setup null?

            })( elements[i] );

        }//end: for()

        return this;

    }//end: processElements()


    /**
     * Make the selected items stick to the top of the viewport
     * upon reaching a scrolling offset.
     * This method manipulates the following css properties on
     * the element that is to be sticky: top, position.
     * Elements also receive a css class named 'hasStickOnScroll'.
     *
     * @param {Object} options
     * @param {Integer} [options.topOffset=0]
     * @param {Integer} [options.bottomOffset=5]
     * @param {Object|HTMLElement|jQuery} [options.footerElement=null]
     * @param {Object|HTMLElement|jQuery} [options.viewport=window]
     * @param {String} [options.stickClass="stickOnScroll-on"]
     * @param {Boolean} [options.setParentOnStick=false]
     * @param {Boolean} [options.setWidthOnStick=false]
     * @param {Function} [options.onStick=null]
     * @param {Function} [options.onUnStick=null]
     *
     * @return {jQuery} this
     *
     */
    $.fn.stickOnScroll = function(options) {
        return this.each(function(){

            // If element already has stickonscroll, exit.
            if ($(this).hasClass("hasStickOnScroll")) {
                return this;
            }

            // Setup options for tis instance
            var o   = $.extend({}, {
                            topOffset:          0,
                            bottomOffset:       5,
                            footerElement:      null,
                            viewport:           window,
                            stickClass:         'stickOnScroll-on',
                            setParentOnStick:   false,
                            setWidthOnStick:    false,
                            onStick:            null,
                            onUnStick:          null
                        }, options),
                viewportKey,
                setIntID,
                setIntTries = 1800; // 1800 tries * 100 milliseconds = 3 minutes

            o.isStick                   = false;
            o.ele                       = $(this).addClass("hasStickOnScroll");
            o.eleParent                 = o.ele.parent();
            o.eleOffsetParent           = o.ele.offsetParent();
            o.viewport                  = $(o.viewport);
            o.eleTop                    = 0;
            o.eleTopMargin              = parseFloat(
                                            (o.ele.css("margin-top") || 0)
                                        ) || 0;
            o.footerElement             = $(o.footerElement);
            o.isWindow                  = true;
            o.isOnStickSet              = $.isFunction(o.onStick);
            o.isOnUnStickSet            = $.isFunction(o.onUnStick);
            o.wasStickCalled            = false;
            o.isViewportOffsetParent    = true;

            /**
             * Retrieves the element's top position based on the type of viewport
             * and sets on the options object for the instance. This Top position
             * is the element top position relative to the the viewport.
             *
             * @return {Integer}
             */
            o.setEleTop = function(){

                if (o.isStick === false) {

                    if (o.isWindow) {

                        o.eleTop = o.ele.offset().top;

                    } else {

                        o.eleTop = ( o.ele.offset().top - o.viewport.offset().top );

                    }

                }

            }; //end: o.setEleTop()

            /**
             * REturns an elements top position in relation
             * to the viewport's Top Position.
             *
             * @param {jQuery} $ele
             *          This element must be inside the viewport
             *
             * @return {Integer}
             *
             */
            o.getEleTopPosition = function($ele) {

                var pos = 0;

                if (o.isWindow) {

                    pos = $ele.offset().top;

                } else {

                    pos = ( $ele.offset().top - o.viewport.offset().top );

                }

                return pos;

            }; /* o.getEleTopPosition() */

            /**
             * Get's the MAX top position for the element before it
             * is made sticky. In some cases the max could be less
             * than the original position of the element, which means
             * the element would always be sticky... in these instances
             * the max top will be set to the element's top position.
             *
             * @return {Integer}
             */
            o.getEleMaxTop = function() {

                var max = ( ( o.eleTop - o.topOffset ));

                if (!o.isWindow) {

                    max = (max + o.eleTopMargin);

                    // If ele parent is not the viewport, then adjust the max top


                }

                return max;

            }; //end: o.getEleMaxTop()

            /**
             * Gets the distance between the top of the element and the
             * top of the viewport. Basically the offset from the top of
             * the "page" inside the viewport. This distance is alwasy the
             * same even if the viewport is scrolled. The only time it
             * changes is when elements are inserted or removed above the
             * the Element or item above it are hidden/displayed.
             * Methods uses the Position() values until it reaches the
             * viewport
             */
            o.getElementDistanceFromViewport = function($ele) {

                var distance    = $ele.position().top,
                    $parent     = $ele.offsetParent();

                // If the parent element is the root body element, then
                // we've reached the last possible offsetParent(). Exit
                if ($parent.is("body") || $parent.is("html")) {

                    return distance;

                }

                // If the positioned parent of this element is NOT
                // the viewport, then add the distance of that element's
                // top position
                if ($parent[0] !== o.viewport[0] ) {

                    distance = (
                        distance +
                        o.getElementDistanceFromViewport( $parent )
                    );

                // ELSE, this is the viewport... Adjust the elements
                // Distance by adding on the amount of scroll the element
                // currently has
                } else {

                    distance = (distance + o.viewport.scrollTop());

                }

                return distance;

            }; /* end: .getElementDistanceFromViewport() */

            // If setParentOnStick is true, and the parent element
            // is the <body>, then set setParentOnStick to false.
            if (o.setParentOnStick === true && o.eleParent.is("body")){

                o.setParentOnStick = false;

            }

            if (!$.isWindow(o.viewport[0])) {

                o.isWindow  = false;

            }

            /**
             * Adds this sticky element to the list of element for the viewport.
             *
             */
            function addThisEleToViewportList() {

                o.setEleTop();

                viewportKey = o.viewport.prop("stickOnScroll");

                // If the viewport is not the Window element, and the view port is not the
                // stick element's imediate offset parent, then we need to adjust the
                // top-offset so that element are position correctly.
                // See issue #3 on github
                if (!o.isWindow) {

                    o.isViewportOffsetParent    = ( o.eleOffsetParent[0] === o.viewport[0] );

                }

                // If this viewport is not yet defined, set it up now
                if (!viewportKey) {

                    viewportKey = "stickOnScroll" + String(Math.random()).replace(/\D/g,"");
                    o.viewport.prop("stickOnScroll", viewportKey);
                    viewports[viewportKey] = [];
                    o.viewport.on("scroll", processElements);

                }

                // Push this element's data to this view port's array
                viewports[viewportKey].push(o);

                // Trigger a scroll even
                o.viewport.trigger("scroll");

            } /* end: addThisEleToViewportList() */

            // If Element is not visible, then we have to wait until it is
            // in order to set it up. We need to obtain the top position of
            // the element in order to make the right decision when it comes
            // to making the element sticky.
            if (o.ele.is(":visible")) {

                addThisEleToViewportList();

            } else {

                setIntID = setInterval(function(){

                    if (o.ele.is(":visible") || !setIntTries) {

                        clearInterval(setIntID);
                        addThisEleToViewportList();

                    }

                    --setIntTries;

                }, 100);

            }

            return this;

        });//end: each()

    };//end: $.fn.stickOnScroll()

}));

// Begin custom js
$(".element").stickOnScroll();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js