JSFiddle - React, Tailwind, and code Playground

by Tyler N.

JavaScript

(function($) {
  var paddingTop = 82;
  var stopscrollFromTop = 126;
  var scrollSpeed = 1000;
  var bodyClassName = 'stuck';

  $.fn.magellan = function(elem) {
    return this.each(function() {
      var $this = $(this);
      
      //initialize bootstrap-scrollspy for magellan navbar
      $(elem).scrollspy();

      //magellan navbar, stick to header
      $(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);
        }
      });

      //smooth, animated scroll for magellan navbar
      $('.' + $this.attr('class') + ' a').on('click', function(e) {
        e.preventDefault();
        var that = $(this).attr('href');

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

      });
    });
  }
})(jQuery);


$(function() {
    
    $('.magellan-navbar').magellan();

});