JSFiddle - React, Tailwind, and code Playground

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<div class="h" data-bind="onScrollPast: { bodyCss: 'collapse-header' }">
  <h1>Header</h1>
</div>
<div class="m">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Nulla facilisi. Phasellus interdum turpis id quam ultrices rutrum.</p>
  <p>Pellentesque fringilla neque id urna varius tincidunt.</p>
  <p>Curabitur fermentum vestibulum risus, in feugiat dolor malesuada nec.</p>
  <p>Suspendisse non neque ac est auctor pellentesque ut vel lectus.</p>
  <p>In sit amet sapien odio. Cras a eros volutpat, malesuada justo ut, condimentum lorem.</p>
  <p>Aliquam elementum mauris sed mi rutrum, at pharetra metus rutrum.</p>
  <p>Morbi ultrices gravida justo vitae fermentum.</p>
  <p>Nunc scelerisque ante sed massa viverra, ut tristique dui facilisis.</p>
  <p>Etiam at nunc id lacus iaculis ultrices.</p>
  <p>Quisque vehicula lectus id justo aliquet efficitur.</p>
  <p>Vestibulum finibus dolor at leo vulputate placerat.</p>
  <p>Maecenas lobortis augue ut leo cursus facilisis.</p>
  <p>Donec eget arcu lobortis, ultrices leo ac, vestibulum leo.</p>
  <p>Sed a neque id sapien facilisis molestie ut sed nunc.</p>
</div>

CSS

.h {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: rgba(0, 0, 0, 0.25);
  }
  
  .m {
    padding-top: 100px;
  }

JavaScript

(function()
{
    // ------------------------------------------------------------------------------------------------------------------------------------------------
    if (typeof (ko.bindingHandlers.onScrollPast) == 'undefined')
    {
    		var f_scrollhandler = function(el, o, e)
        {
        	var dtop = document.body.scrollTop || document.documentElement.scrollTop;
          var elbottom = el.offsetTop + el.offsetHeight;
                    
          if(dtop > elbottom)
          {
          	!!o.bodyCss && $(document.body).addClass(o.bodyCss);
            !!o.css && $(el).addClass(o.css);
          }
          else
          {
          	!!o.bodyCss && $(document.body).removeClass(o.bodyCss);
            !!o.css && $(el).removeClass(o.css);
          }
        };
        
        ko.bindingHandlers.onScrollPast = {
            init:
                function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext)
                {          
                	var o = ko.unwrap(f_valueaccessor());
                  
                  var options = {};
                  var f= f_scrollhandler.bind(window, el, o);
                  
                  if(o)
                  	window.addEventListener("scroll", f, options);
                  else 
                  	window.removeEventListener("scroll", f, options);
                }
        };
    }
})();


jQuery(function() { ko.applyBindings(); });