JSFiddle - React, Tailwind, and code Playground

Sticky elements jquery plugin.

by Travis Almand

HTML

<div id="container">
  <div id="left">
    <ul></ul>
    <div class="buttons"></div>
  </div>
  <div id="right">
    <ul></ul>
    <div id="sticky_buttons" class="buttons"></div>
  </div>
</div>

<div style="height: 300px;"></div>

CSS

li {
  padding: 10px;
}

#container {
  border: 1px solid gainsboro;
  margin: 20px;
  overflow: auto;
}
#left {
  float: left;
  width: 25%;
}
#right {
  float: right;
  width: 75%;
}

.buttons {
  background: white;
  border: 1px solid red;
  box-sizing: border-box;
  height: 100px;
}

JavaScript

// this is just to populate the ULs
for (var i = 30; i > 0; i--) {
	$('#right ul').append('<li>list item</li>')
}
for (var i = 20; i > 0; i--) {
	$('#left ul').append('<li>list item</li>')
}

(function($) {
  $.fn.stickyElements = function() {
    return this.each(function () {
			var $this = $(this);
      var $window = $(window);
    	var $document = $(document);
      var scrollTimer = null;
    	var resizeTimer = null;
      
      function setupSticky () {
        $this
          .removeClass('sticky-element-fixed')
          .removeAttr('style')
          .attr({
          'data-offsettop': $this[0].offsetTop,
          'data-offsetleft': $this[0].offsetLeft,
          'data-originalwidth': Math.round($this.width())
        });

        if (!$this.prev().hasClass('sticky-element-dummy')) {
          $this.before('<div class="sticky-element-dummy"></div>');
        }

        checkSticky();
      }
      
      function checkSticky () {
        if ($window.scrollTop() < ($this.attr('data-offsettop') - $window.height()) + $this.outerHeight(true)) {
          if (!$this.hasClass('sticky-element-fixed')) {
            $this.addClass('sticky-element-fixed').css({
              'left': $this.attr('data-offsetleft') + 'px',
              'width': $this.attr('data-originalwidth') + 'px',
              'position': 'fixed',
              'bottom': 0
            }).parent().find('.sticky-element-dummy').css({
              'width': $this.attr('data-originalwidth') + 'px',
              'height': $this.outerHeight(true) + 'px'
            });
          }
        } else {
          if ($this.hasClass('sticky-element-fixed')) {
            $this.removeClass('sticky-element-fixed').removeAttr('style').parent().find('.sticky-element-dummy').removeAttr('style');
          }
        }
      }
      
      setupSticky();
      
      $window.on('resize', function () {
        if (resizeTimer) {
          clearTimeout(resizeTimer);
        }
        resizeTimer =...