gistfile1.js

/** 
Usage 
main.js
**/
(function($){
$(document).ready(function () {
    
    var onStickyPage = function(){
        return ($(window).width() > 971) 
                && ($(".level-two #column-2 .portlet-navigation").length > 0) 
                && ($(".sticky-nav").length > 0) 
                ;
    };
    var stickOn = function(){
        return onStickyPage() 
                && (!$("body").is(".signed-in") || !$("body").is(".controls-visible")) 
        ;
    };
    if(onStickyPage())
    {
        var carouselHeight = $('.level-two #column-1').outerHeight();
        var stickyNavTop = $('nav.navbar.navbar-default.navbar-fixed-top').height();
        var navHeaderTop = $(".level-two #column-2 .portlet-navigation h2").height() + stickyNavTop;
        var offsetTop = $("nav.navbar-fixed-top").outerHeight() ;
        var $window = $(window);
        var sideNavFooter = $("footer.footer").offset().top 
            - $(".level-two #column-2 .portlet-navigation h2").offset().top 
            - $(".level-two #column-2 .portlet-navigation h2").outerHeight() 
            - $(".level-two #column-2 .portlet-navigation .portlet-body > div > ul").outerHeight();
        var sideNavTop = $("nav.navbar-fixed-top").outerHeight()
                          + $(".level-two #column-2 .portlet-navigation h2").outerHeight() 
                            + 6.75;
        var options = {topSpacing: stickyNavTop, scrollHeight: carouselHeight, valid:stickOn};
        var sideNavOptions = {delta: sideNavFooter, top:sideNavTop, valid:stickOn};

        $(".level-two #column-2 .portlet-navigation h2").stick(options);
        $(".level-two .sticky-div").stick(options);
        $(".level-two #column-2 .portlet-navigation .portlet-body > div > ul").fixedSideNav(sideNavOptions);
        if(isAdmin)
        {
            var addControlListener = function(elemId, options) {
                var lastControl = $("body").is(".controls-visible");
                window.setInterval( function() {   
                   var control = $("body").is(".controls-visible");
                    if (control !== lastControl) {
                        lastControl = control;
                        if (control) {
                            $(elemId).unstick(options);
                        }
                        else{
                            $(elemId).stick(options);
                        }
                    }
                },500);
            };    
            //addControlListener(".level-two #column-2 .portlet-navigation h2", options);
            //addControlListener(".level-two .sticky-div", options);
        }
    }


});

})(jQuery);

jquery.stick.js

/**
jquery sticky navigation.

// The stick plugin can be used to make an element sticky to the top. It can be used as 

    <script type="text/javascript" src="${theme_display.getPathThemeRoot()}/js/jquery.sticky.js"></script>

    var options = {topSpacing: stickyNavTop, scrollHeight: carouselHeight, valid:stickOn};

    $(".level-two #column-2 .portlet-navigation h2").stick(options);
    $(".level-two .sticky-div").stick(options);

    // The plugin idenntifies the element based on css selector and creates a duplicate element with same properties
    but hidden. When the element scrolls past the scrollHeight, it turns sticky. The topSpacing is used as top point
    of the element when it is sticky.

// The unstick plugin can be used to reverse the stickyness of element. It can be used as 
        
   var control = $("body").is(".controls-visible");
    if (control !== lastControl) {
        lastControl = control;
        if (control) {
            $(elemId).unstick(options);
        }
        else{
            $(elemId).stick(options);
        }
    }

// The fixedSideNav plugin is used to make the side navigation stop scrolling beyond the top. The plugin can be used as 

    var sideNavOptions = {delta: sideNavFooter, top:sideNavTop, valid:stickOn};
    $(".level-two #column-2 .portlet-navigation .portlet-body > div > ul").fixedSideNav(sideNavOptions);
    
    // If the content of the side nav is long, then the bottom of the side navigation scrolls up as the bottom of the body
    aligns with the bottom of the side nav.

*/
//stick top headers
jQuery.noConflict();
(function($) {
    Object.defineProperty(Array.prototype, "pushIfNotExist", {
        enumerable: false,
        value: function(element, comparer) { 
            for(var i=0; i < this.length; i++) { 
                if(comparer(this[i], element)) return; 
            }
            this.push(element);
        }
    });
    Object.defineProperty(Array.prototype, "popIfExist", {
        enumerable: false,
        value: function(element, comparer) { 
            var el = this.getIfExist(element, comparer);
            if(typeof el !== "undefined")
            {
                var i = this.indexOf(el);
                if(i>=0){
                    this.splice(i,1);
                }
            }
        }
    });
    Object.defineProperty(Array.prototype, "getIfExist", {
        enumerable: false,
        value: function(element, comparer) { 
            for(var i=0; i < this.length; i++) { 
                if(comparer(this[i], element)) return this[i]; 
            }
        }
    });

    function css(a) {
        var sheets = document.styleSheets,
            o = {};
        for (var i in sheets) {
            var rules = sheets[i].rules || sheets[i].cssRules;
            for (var r in rules) {
                if (a.is(rules[r].selectorText)) {
                    o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
                }
            }
        }
        return o;
    }

    function css2json(css) {
            var s = {};
            if (!css) return s;
            if (css instanceof CSSStyleDeclaration) {
                for (var i in css) {
                    if ((css[i]).toLowerCase) {
                        s[(css[i]).toLowerCase()] = (css[css[i]]);
                    }
                }
            } else if (typeof css == "string") {
                css = css.split("; ");
                for (var i in css) {
                    var l = css[i].split(": ");
                    s[l[0].toLowerCase()] = (l[1]);
                }
            }
            return s;
    }
    
  var defaults = {
      topSpacing: 0,
      scrollHeight: undefined,
      bottomSpacing: 0,
      className: 'is-sticky',
      wrapperClassName: 'sticky-wrapper',
      center: false,
      getWidthFrom: '',
      responsiveWidth: false,
      valid: function(){return true;},
      onbefore: function(){return true;},
      onafter: function(){return true;},
      isSticked: undefined
    },
    $window = $(window),
    $document = $(document),
    sticked = [],
    windowHeight = $window.height(),
    scroller = function(){
      for (var i = 0; i < sticked.length; i++) {
          var $this = sticked[i].stickyElement,
              s = sticked[i].settings;
          if((s.valid !== "undefined") && s.valid())
          {
              var scrollTop = $window.scrollTop();
              var isSticked = (scrollTop>=s.scrollHeight);
              if(isSticked!== s.isSticked){
                  if(s.onbefore!=="undefined"){s.onbefore();}
                  if(isSticked){
                      var elementTop = $this.offset().top;
                      var newTop = s.topSpacing;
                      $this.css('position', 'fixed')
                          .css('top', newTop);
                      $this.next().show();
                  }
                  else{
                      $this.css('position', 'relative')
                          .css('top', '');
                        $this.next().hide();
                  }
                  if(s.onafter!== "undefined"){s.onafter();}
                  s.isSticked = isSticked;
              }
          }
      }
    },
    resizer=scroller;

    var dupliIdPrefix = '_stick_dupl';
    var comparer = function(e, item) { 
        return e.stickyElement[0] === item[0]; 
    };

    //
    $.fn.getSelector= function () {
        var $this = this,
            id = $this.attr("id");
        var selector = $(this).parents()
                    .map(function() { return this.tagName; })
                    .get().reverse().join(" ");
        if (selector) { 
            selector += " "+ $(this)[0].nodeName;
        }
        var id = $(this).attr("id");
        if (id) { 
            selector += "#"+ id;
        }
        var classNames = $(this).attr("class");
        if (classNames) {
            selector += "." + $.trim(classNames).replace(/\s/gi, ".");
        }        
        var parent = $this.parent(),
            realNode = $this[0];
        var sameTagSiblings = parent.children(name);
        if (sameTagSiblings.length > 1) {
            allSiblings = parent.children();
            var index = allSiblings.index(realNode) + 1;
            if (index > 1) {
                selector += ':nth-child(' + index + ')';
            }
        }
        
    }
    //
    $.fn.getPath= function () {
        var path, node = this;
        while (node.length) {
            var realNode = node[0],
                name = realNode.localName;
            if (!name) break;
            name = name.toLowerCase();
            var parent = node.parent();
            var sameTagSiblings = parent.children(name);
            if (sameTagSiblings.length > 1) {
                allSiblings = parent.children();
                var index = allSiblings.index(realNode) + 1;
                if (index > 1) {
                    name += ':nth-child(' + index + ')';
                }
            }
            path = name + (path ? '>' + path : '');
            node = parent;
        }
        return path;
    }
    //
    $.fn.stick = function(options){
        return this.not("[id$='"+dupliIdPrefix+"']").each(function(){
            var settings;
            if(typeof options !== "undefined"){
                settings = $.extend( true, JSON.parse(JSON.stringify({scrollHeight:options.topSpacing})), defaults, options);
            }
            else{
                settings = defaults;
            }
            $this = $(this);
            var stickedElem = sticked.getIfExist($this, comparer);
            if(typeof stickedElem !== "undefined"){
                settings = $.extend( true, settings, stickedElem.settings);
            }
            else{
                var newDiv = $($this[0].outerHTML);
                newDiv.attr("id", $this.getPath()+dupliIdPrefix);
                $this.after(newDiv);
                $this.next().hide();
                var height = $this.height(),
                    width = $this.parent().width();
                /*$this.attr('style', 'margin-bottom:'+' -'+height +'px !important');*/
                var zIndex = ~~$this.next().css('z-index') ;
                $this.css('position', 'relative');
                $this.css('z-index', zIndex+1);
                $this.css('width', width);
                $this.css('transition', 'all 1s cubic-bezier(.17,.67,.83,.67)');
                //$this.next().attr('style', 'padding-top:'+ height +'px !important');
                setTimeout(scroller, 100);
                var item = {
                    settings: settings,
                    stickyElement: $this,
                    currentTop: $this.offset().top
                };
                sticked.pushIfNotExist(item, comparer);
            }
        });
    };
    
    $.fn.unstick = function(options){
        var settings;
        if(typeof options !== "undefined"){
            settings = $.extend( true, {scrollHeight:options.topSpacing}, defaults, options);
        }
        else{
            settings = defaults;
        }
        return this.not("[id$='"+dupliIdPrefix+"']").each(function(){
            $this = $(this);
            $this.nextAll($this[0].tagName+"[id$='"+dupliIdPrefix+"']").remove();
            var height = $this.height,
                width = $this.parent().width();
            var zIndex = ~~$this.next().css('z-index') ;
            $this.css('position', '');
            $this.css('z-index', zIndex);
            $this.css('width', width);
            $this.css('transition', '');
            //$this.next().attr('style', 'padding-top:'+ height +' !important');
            setTimeout(scroller, 100);
            sticked = sticked.filter
            (function(el){
                return el.stickyElement[0] !== $this[0];
            });
        });
    };

    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
    }
    
    $.fn.fixedSideNav = function(options){
        var defaults = {
            delta: 0,
            top: 15,
            valid: function(){return true;}
        };

        return this.each(function(){
            var s;
            if(typeof options !== "undefined"){
                s = $.extend( true, defaults, options);
            }
            else{
                s = defaults;
            }
            var $this = $(this);
            var $window = $(window);
            var offset = $this.offset(),
            delta = s.delta,
            top = s.top;
            $(window).scroll(function() {
                if(s.valid())
                {
                    var marginTop=Math.min(Math.max($window.scrollTop()-top, 0), delta);
                    $this.attr("style", "margin-top:"+marginTop+"px !important");
                    userScrolled = false;
                }
            });
        });
    }

})(jQuery);

usage.html

<scrip src="jquery.stick.js">
  var options = {topSpacing:thePixelFromTopWheereTheMenuShouldStick, scrollHeight: theDistanceInPixelToScrollBeforeSticking, valid:functionToCheckIfElementShouldStick};
      $("#element_idORselector").stick(options);
</scrip>

usage: check https://www.citizensfla.com/personal-policies