JSFiddle - React, Tailwind, and code Playground

by infous

HTML

<div class="f">
  <ol>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
    <li>One</li>
  </ol>

</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, aspernatur! Voluptatem, in! Minus vel, nisi fugiat autem aliquam, neque eos consectetur, saepe deserunt magnam, assumenda quos repudiandae? Possimus, harum minus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, aspernatur! Voluptatem, in! Minus vel, nisi fugiat autem aliquam, neque eos consectetur, saepe deserunt magnam, assumenda quos repudiandae? Possimus, harum minus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, aspernatur! Voluptatem, in! Minus vel, nisi fugiat autem aliquam, neque eos consectetur, saepe deserunt magnam, assumenda quos repudiandae? Possimus, harum minus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, aspernatur! Voluptatem, in! Minus vel, nisi fugiat autem aliquam, neque eos consectetur, saepe deserunt magnam, assumenda quos repudiandae? Possimus, harum minus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, aspernatur! Voluptatem, in! Minus vel, nisi fugiat autem aliquam, neque eos consectetur, saepe deserunt magnam, assumenda quos repudiandae? Possimus, harum minus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, aspernatur! Voluptatem, in! Minus vel, nisi fugiat autem aliquam, neque eos consectetur, saepe deserunt magnam, assumenda quos repudiandae? Possimus, harum minus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, aspernatur! Voluptatem, in! Minus vel, nisi fugiat autem aliquam, neque eos consectetur, saepe deserunt magnam, assumenda quos repudiandae? Possimus, harum minus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing...

CSS

.f {
  border: 1px solid red;
  background: #aaa;
  height: 600px;
  position: absolute;
  right: 10px;
  top: 10px;
  transition: top .25s;
  width: 200px;
}

li { margin: 20px; }

body { background: yellow; }

JavaScript

(function ($) {
	$.fn.fixedGiraffe = function () {
    var oldTop = $(window).scrollTop();
    //var oldTop;
    var viewportHeight = window.innerHeight;
    var el = this;
    var timer;
    var topOffset = parseInt(el.css('top'), 10);
    var height = el.outerHeight();
    
    //el.text(topOffset + height + 'x' + viewportHeight);
    
    $(window).scroll(function () {
      var scrollTop = $(this).scrollTop();
			if (oldTop === null) { oldTop = scrollTop; }
            
      clearTimeout(timer);
      
      if (height + topOffset < viewportHeight) {
        timer = setTimeout(function () {
          console.log('AAA', 'small')
					el.css('top', scrollTop + topOffset + 'px');         	
        }, 250);
        
        return;
      }
      
      if (oldTop < scrollTop) { // down
      	timer = setTimeout(function () {
        	if (el.offset().top + el.outerHeight()  < scrollTop + viewportHeight) {
	        	console.log('AAA', 'down')
						el.css('top', (scrollTop + viewportHeight) - (el.outerHeight() + topOffset) + 'px');
          }        	
        	
        	oldTop = null;
        }, 250);
        
        return;
      }

      if (oldTop > scrollTop) { // up
        timer = setTimeout(function () {

        	if (el.offset().top - topOffset > scrollTop) {
	        	console.log('AAA', 'up', el.offset().top, scrollTop)
						el.css('top', scrollTop + topOffset + 'px');
          }
        	//console.log('AAA', 'up', oldTop, scrollTop, Math.round(oldTop - scrollTop));
        	oldTop = null;
        }, 500);
      }
      
      //oldTop = scrollTop;
    });
    
  	return this;
  };
})(jQuery);

jQuery('.f').fixedGiraffe();