JSFiddle - React, Tailwind, and code Playground

by Tyler N.

JavaScript

(function($) {
  var paddingTop = 82;
  var stopscrollFromTop = 126;
  var scrollSpeed = 750;
  var bodyClassName = 'rain';

  $.fn.magellan = function(elem) {
    return this.each(function() {
      var $this = $(this);
      
      $(window).scroll(function() {
        var pos = $this.offset().top - $(window).scrollTop();
        var contentPos = $('.scrollable-content').offset().top - $(window).scrollTop();
        if(pos <= paddingTop && contentPos < stopscrollFromTop ) {
          $this.addClass(bodyClassName);
          $('body').addClass(bodyClassName);
        } else if(contentPos > stopscrollFromTop) {
          $this.removeClass(bodyClassName);
          $('body').removeClass(bodyClassName);
        }
      });

      $('.' + $this.attr('class') + ' a').click(function(e) {
        var that = $(this).attr('href');
        console.log(that);

        $('html, body').animate({
          'scrollTop': $(that).offset().top - stopscrollFromTop + 'px'
        }, scrollSpeed);

        e.preventDefault();
      });
    });
  }
})(jQuery);