kaioe
1/17/2018 - 1:05 AM

stickyElement.js

stickyElement.js

  (function ( $ ) {
    $.fn.stickyElement = function(options){

      var Element = this,
          Parent = Element.parent(),
          ParentBottom = Parent.innerHeight() + Parent.offset().top,
          startScroll = Element.offset().top,
          stopScroll = ParentBottom;

        Element.css('border', 'red solid 1px');
        Parent.css('border', 'blue solid 1px');

      if (typeof options != 'undefined') {
        options.headerHeight = (options.headerHeight)?options.headerHeight:0;
        // options.offsetTop = (options.offsetTop)?options.offsetTop:0;
        options.offsetTop = (options.offsetTop)?options.offsetTop:options.headerHeight;
      }

      $(window).on('resize load scroll mousewheel', function(event) {

        var topPosition = $(window).scrollTop()-options.offsetTop,
            breakpoint = $(window).width(),
            ElementBottom = Element.innerHeight() + Element.offset().top,
            ParentBottomPosition = ParentBottom - $(window).scrollTop();

        if (breakpoint > 980) {
          Element.css({
            position: 'absolute',
            right: '0'
          });
        }else{
          Element.css({
            position: 'relative',
            right: '0',
            top: '0'
          });
        }

      });
    };
  }(jQuery));