Docs

[gentrylord]

Hi there,
I am fairly new to WordPress but not a total rookie when it comes to HTML. I just bought the awesome X-Theme and I want a certain effect like on this page (hope this is not too rude):
http://demo.qodeinteractive.com/bridge27/

What I am looking for is the header effect. It disappears when scrolling down but comes back later at a certain scroll point but smaller especially with a smaller icon.

Any ideas how one can include this in the X-Theme? How is this effect called and is it javascript then?

Thank you

[Thai]

Hi There,

#1] Please add the following CSS under Customizer > Custom > Global CSS:

.nav-up {
    top: -50px;
}
.nav-down {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
}
.admin-bar .nav-down {
  top: 32px;
}

#2] Please add the following code under Customizer > Custom > Global Javascript:

jQuery( function($) {
	var didScroll;
	var lastScrollTop = 0;
	var delta = 5;
	var navbarHeight = $('.x-navbar').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-navbar').removeClass('nav-down').addClass('nav-up');
	    } else {
	        // Scroll Up
	        if(st + $(window).height() < $(document).height()) {
	            $('.x-navbar').removeClass('nav-up').addClass('nav-down');
	        }
	    }

	    if (st == 0) {$('.x-navbar').removeClass('nav-down')};
	    
	    lastScrollTop = st;
	}
});

Hope it helps 🙂

[gentrylord]

Thank you for your reply, but it is not working as I hoped. The header disappears but kind of laggy when trying it with the integrity 7 theme.

Also the header does not reappear after scrolling down a certain amount, plus it is not resizing.

Maybe it has something to do with me using a child theme?

[Rupok]

Hi there,

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts