Hide Header Menubar when scroll through slider image


#1

This is my working site https://www.lifesanthem.com/

At the first time when the home page load menu bar is showing that’s ok. I want to hide MenuBar when scrolling through the slider image. And again want to show it when scrolling through the Service section.
This site is a real example of this scenario. https://www.pixelz.com/

Images Of Example secnario.


Again Showing Header Menu in Next section


#2

Hello,

Yes, this is possible with some custom coding. I made JS script for this purpose and you need to add it trough JS file from child theme but if you don’t know how to do that you can also try some plugin for adding scripts like maybe this one https://wordpress.org/plugins/insert-headers-and-footers/ . If plugin is already have function for triggering script on load then omit that part from provided script. If you are adding it with JS file then use it as it is:

(function ($) {

	$(document).ready(function() {
		initHidingHeader();
	});

	function initHidingHeader() {
		var $menu		   = $('.site-header'),
			$menu_position = 0,
			$slider 	   = $('.header-slider'),
			$slider_height = 0;

		if ( $slider.length && $menu.length ) {
			$slider_height = $slider.outerHeight();

			$(document).on('scroll', function () {
				$menu_position = $menu.offset().top;

				if ( $menu_position == 0 ) {
					$menu.removeClass('menu-hidden menu-shown');
					$menu.addClass('menu-shown');
				} else if ( $menu_position < $slider_height ) {
					$menu.removeClass('menu-hidden menu-shown');
					$menu.addClass('menu-hidden');
				} else {
					$menu.removeClass('menu-hidden menu-shown');
					$menu.addClass('menu-shown');
				}
			});
		}
	}

})(jQuery);

Also, you will have to add css code for hiding and showing menu with css classes handled by the script. You can add css from Appereance > Customize > Additional CSS:

.site-header.menu-hidden {
    opacity: 0;
    visibility: hidden;
}

.site-header.menu-shown {
    opacity: 1;
    visibility: visible;
}

Final result should look like this https://www.screencast.com/t/DJh9IN8Agcf

Best Regards!


#3

Thank You @dimikjones for your effort to help me.

Unfortunately, your code did not work. It hides my entire home page.


#4

Hi again,

If you got blank page then you didn’t apply it correctly. If you are using headers and footers scripts you need to wrap code with proper tags https://www.screencast.com/t/ZglyPQlgCtzN . In addition, to be sure that calculations are correct and script is triggered with all elements loaded you can trigger code onload instead of ready state. So, for script, don’t forget script tags:

<script>
(function ($) {

	$(window).load(function() {
		initHidingHeader();
	});

	function initHidingHeader() {
		var $menu		   = $('.site-header'),
			$menu_position = 0,
			$slider 	   = $('.header-slider'),
			$slider_height = 0;

		if ( $slider.length && $menu.length ) {
			$slider_height = $slider.outerHeight();

			$(document).on('scroll', function () {
				$menu_position = $menu.offset().top;

				if ( $menu_position == 0 ) {
					$menu.removeClass('menu-hidden menu-shown');
					$menu.addClass('menu-shown');
				} else if ( $menu_position < $slider_height ) {
					$menu.removeClass('menu-hidden menu-shown');
					$menu.addClass('menu-hidden');
				} else {
					$menu.removeClass('menu-hidden menu-shown');
					$menu.addClass('menu-shown');
				}
			});
		}
	}

})(jQuery);
</script>

and if you want to add css form there then add it like this:

<style type="text/css">
.site-header.menu-hidden {
    opacity: 0;
    visibility: hidden;
}

.site-header.menu-shown {
    opacity: 1;
    visibility: visible;
}
</style>

Place style inside header, and script into footer https://www.screencast.com/t/J1MhS9lM1O

Again, code is working and here is short video from my testing enviroment https://www.screencast.com/t/63kZW6QTeYk7

Best Regards!


#5

@dimikjones you are awesome. It’s now working fine.