MediaWiki:SmoothGlobalNav/code.js

/* * Name: SmoothGlobalNav * Description: Enables a less intrusive scroll experience with the global navigation. * Author: Pogodaanton */ var sgn; $(function {   sgn = {        prevScroll: null,        startScrollDown: null,

scroll: function(event) { var scrollVal = $(window).scrollTop; var scrollDiff = scrollVal - sgn.prevScroll; var diffStartVal, translateVal, noShadow;

event.stopPropagation;

// Checks whether you scroll DOWN or UP (based on scrollDiff) & whether there is a top-ad. if (scrollDiff > 0 && !$('#globalNavigation').hasClass('bfaa-pinned')) { if (sgn.startScrollDown === null) { sgn.startScrollDown = scrollVal; }

// If the nav is fully hidden, var startScrollDown follows further scrolling if ($('#globalNavigation').attr('style') !== 'transform: translateY(-100%); box-shadow: none;') { // eslint-disable-line // How many pixels away we are from the point we started to scroll down diffStartVal = scrollVal - sgn.startScrollDown; // Convert diffStartVal into percent value translateVal = diffStartVal * 100 / 55 * -1;

if (translateVal <= -100) { noShadow = ' box-shadow: none;'; translateVal = -100; }

$('#globalNavigation').attr('style', 'transform: translateY(' + translateVal + '%);' + noShadow); } else { sgn.startScrollDown = scrollVal - 55; }           } else if (sgn.startScrollDown !== null) { diffStartVal = scrollVal - sgn.startScrollDown; translateVal = diffStartVal * 100 / 55 * -1;

if (translateVal >= 0) translateVal = 0; $('#globalNavigation').attr('style', 'transform: translateY(' + translateVal + '%);');

// If the navigation is fully visible, reset the values if (scrollVal <= sgn.startScrollDown) { sgn.startScrollDown = null; }           }

sgn.prevScroll = scrollVal; },

// Removes hidden nav & transition Classes setDefault: function { $('#globalNavigation').removeClass('headroom--unpinned headroom'); },

init: function { this.prevScroll = $(window).scrollTop;

this.setDefault; $(document).on('scroll', sgn.scroll); },

// Disabling option for debug purposes disable: function { $(document).off('scroll', sgn.scroll); $('#globalNavigation').removeAttr('style').addClass('headroom--unpinned headroom'); }   }

sgn.init; });