JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<span>test</span>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>

CSS

span { position: relative;}

JavaScript

(function($){

  var $win = $(window);
  var $span = $('span');

  $win.on('scroll', function(){
    var ww = $win.width();
    var wh = $win.height();
    var d = (ww - $span.width()) / (wh - $span.height());
    var y = $span.offset().top + $span.outerHeight();
    var scroll = $win.scrollTop();
    if ((y > scroll + wh) || (y < scroll)) { return false; }
    var left = (scroll + wh - y) * d;
    $span.css('left', left + 'px');
  });

})(jQuery);