How to make the header sticky?


This article is no longer relevant. Since version 2.0.0, VSDocs supports sticky menu natively. Please read the documentation for more information.

 

Natively VSDocs doesn't support sticky header because of the component and layout variations and it may result into big conflicts. However VSDocs is highly customizable so here are few basic steps that may help you to make your header sticky.

Please note that this example was tested on the default VSDocs header so in some cases you may have to adapt the code according to your situation.

Let's get into it.

1. Add the 'js-header-fixed' class on your header element (it's recommended to use it together with the 'header-over' class), like shown in the screenshot.

2. At the end of your custom CSS file add the following lines of code.

.header{
	transition: background-color 0.3s ease;
}

.header-fixed{
	background-color: white;
    position: fixed;
    border: none;
    border-bottom: 1px solid #E6E6E6;
    z-index: 99;
}

3. Add these lines of JavaScript in your custom JavaScript code.

$(window).scroll(function () {
	// Select the fixed header
	var headerFixed = $(".js-header-fixed");

	// Remove the light classes from the header components
	var removeLightClasses = function () {
		$('.js-menu, .slicknav_menu').removeClass('menu-light');
		$('.js-languages').removeClass('languages-light');
		$('.logo-image img').attr('src','img/logos/logo.png');
	}

	// Add the light classes on the header components
	var addLightClasses = function () {
		$('.js-menu, .slicknav_menu').addClass('menu-light');
		$('.js-languages').addClass('languages-light');
		$('.logo-image img').attr('src','img/logos/logo-light.png');
	}

	// Check if a fixed header was found
	if(headerFixed.length){
		// Add the 'header-fixed' class when the top distance is greater than 0 and remove it when it's equal to 0 
		if($(window).scrollTop() === 0){
			headerFixed.removeClass('header-fixed');
			// Uncomment the line bellow if you have light components in the header
			// addLightClasses();
		}else{
			headerFixed.addClass('header-fixed');
			// Uncomment the line bellow if you have light components in the header
			// removeLightClasses();
		}
	}
	
});

 

 

 


Last update:
2016-03-01 15:04
Author:
Vlad Sargu
Revision:
1.3
Average rating:0 (0 Votes)