JS working in preview but not on live site

[fideliscreative]

Hello!

My in progress website is http://fidelisx.wpengine.com

I am using pro theme

I am using JS code to make my header disappear on scroll down and then reappear on scroll up. The code works by adding the class “invisibar” to “x-bar-top” when you scroll down. When you scroll back up it removes “invisibar” and adds “visibar” to “x-bar-top”

This code was working wonderfully on my pages an then suddenly stopped functioning. However, it still functions fine when inside the pro editor/cornerstone, and if you use chrome inspector, you can see the “visibar” and “invisibar” classes switching in and out on scroll.

I can’t seem to find what is making the js not function when viewing the front-end of the site. I’ve tried deactivating all plugins with no luck. Any guidance is appreciated!!

Here is the Header JS:

//Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('.x-bar-top').outerHeight();

$(window).scroll(function(event){
didScroll = true;
});

setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);

function hasScrolled() {
var st = $(this).scrollTop();

// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;

// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('.x-bar-top').removeClass('visibar').addClass('invisibar');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
    $('.x-bar-top').removeClass('invisibar').addClass('visibar');
}
}

lastScrollTop = st;
}

and the Header CSS:

.invisibar{
  opacity:0 !important;
  transition:1s;
}

 .visibar{transition: 1s;}

[thai]

Hi @joshua.gamble,

Please update your custom JS to this:

jQuery(document).ready(function($) {
	// Hide Header on on scroll down
	var didScroll;
	var lastScrollTop = 0;
	var delta = 5;
	var navbarHeight = $('.x-bar-top').outerHeight();

	$(window).scroll(function(event){
	    didScroll = true;
	});

	setInterval(function() {
	    if (didScroll) {
	        hasScrolled();
	        didScroll = false;
	    }
	}, 250);

	function hasScrolled() {
	    var st = $(this).scrollTop();
	    
	    // Make sure they scroll more than delta
	    if(Math.abs(lastScrollTop - st) <= delta)
	        return;
	    
	    // If they scrolled down and are past the navbar, add class .nav-up.
	    // This is necessary so you never see what is "behind" the navbar.
	    if (st > lastScrollTop && st > navbarHeight){
	        // Scroll Down
	        $('.x-bar-top').removeClass('visibar').addClass('invisibar');
	    } else {
	        // Scroll Up
	        if(st + $(window).height() < $(document).height()) {
	            $('.x-bar-top').removeClass('invisibar').addClass('visibar');
	        }
	    }
	    
	    lastScrollTop = st;
	}
});

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.

[fideliscreative]

Thank you so much! I see where I went wrong and I’ll keep that in mind for future js.

[mldarshana]

Glad we were able to help