JSFiddle - React, Tailwind, and code Playground

by infous

HTML

<div class="f">

</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 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,...

CSS

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

JavaScript

(function ($) {
	$.fn.fixedGiraffe = function () {
    var oldTop = $(window).scrollTop();
    var viewportHeight = window.innerHeight;
    var el = this;
    var topOffset = parseInt(el.css('top'), 10);
    var height = el.outerHeight();
    var i = 0;
    
    el.text(topOffset + height + 'x' + viewportHeight);

    $(window).scroll(function () {
      //var top = parseInt(el.css('top'), 10);
      var scrollTop = $(this).scrollTop();

      if (oldTop < scrollTop) {
        //if (top + topOffset + height > viewportHeight) {
        if (top + topOffset + height > viewportHeight) {
          el.text((i++) + 'x' + top);
          el.css('top', (top - 1) + 'px');
        }
      }

      if (oldTop > scrollTop) {
        if (top < topOffset || top + height < viewportHeight) {
        	//el.text(i++);
          el.css('top', (top + 1) + 'px');
        }
      }

      oldTop = scrollTop;
    });

    return this;
  };
})(jQuery);

$('.f').fixedGiraffe();

/*

var timer;
var direction;
var oldTop = $(window).scrollTop();
var viewportHeight = window.innerHeight;


$(window).scroll(function () {
	var el = $('.f');
  var top = parseInt(el.css('top'), 10);
  var height = el.outerHeight();
  var topOffset = 10; // px
  
  var theScrollTop = $(this).scrollTop();
   
  if (oldTop < theScrollTop) {
  	$('.f').text('down.... (' + (top + height) + 'x' + viewportHeight + ')');
        
    if (top + topOffset + height > viewportHeight) {
    	el.css('top', (top - 10) + 'px');
    }


  }
  
  if (oldTop > theScrollTop) {
  	$('.f').text('up.... (' + (top ) + 'x' + viewportHeight + ')');
    
    if (top < topOffset || top + height < viewportHeight) {
    	el.css('top', (top + 10) + 'px');
    }

  }
  
  oldTop = theScrollTop;
  
	clearTimeout(timer);
  timer = setTimeout(function () {
  	$('.f').text('');
  }, 500);
});

*/