siamkreative/README.md

## README.md

      
    Raw
  

              README.md
            
          
    What Is This?

This is for the fixed to top version of the Boostrap 4 navbar. Instead of setting the padding and top position in CSS, let's use JavaScript to get it dynamically.
How To Use?

It is best to use the pure JavaScript version. It will be executed earlier since it does not require jQuery to be loaded. The vanilla JavaScript version can be used in the <head> section.
If you are a performance concerned developer, your scripts are probably in the footer just before </body>. Therefore, there might be a slight delay before the jQuery snippet is executed. This can lead to elements jumping around...
For perfectly smooth transition, it is best to execute this JavaScript as soon as the DOM is rendered.

  
## bootstrap-navbar-jquery.js
$(function () {
	// Adjusting spacing for fixed Navbar
	// http://caniuse.com/#search=DOMContentLoaded
	var body = $('body');
	var navbar = $('.navbar');
	var navbarHeight = navbar[0].getBoundingClientRect().height;
	var categoryNav = $('.category-nav');
	var categoryNavHeight = categoryNav[0].getBoundingClientRect().height;
	body.css('padding-top', navbarHeight + categoryNavHeight);
	categoryNav.css('top', navbarHeight);
});

## bootstrap-navbar.js
// Adjusting spacing for fixed Navbar
document.addEventListener('DOMContentLoaded', function (event) {
	var navbar = document.querySelectorAll('.navbar')[0];
	var navbarHeight = navbar.getBoundingClientRect().height;
	var categoryNav = document.querySelectorAll('.category-nav')[0];
	var categoryNavHeight = categoryNav.getBoundingClientRect().height;
	document.body.style.paddingTop = navbarHeight + categoryNavHeight + 'px';
	categoryNav.style.top = navbarHeight + 'px';
});
	$(function () {
	// Adjusting spacing for fixed Navbar
	// http://caniuse.com/#search=DOMContentLoaded
	var body = $('body');
	var navbar = $('.navbar');
	var navbarHeight = navbar[0].getBoundingClientRect().height;
	var categoryNav = $('.category-nav');
	var categoryNavHeight = categoryNav[0].getBoundingClientRect().height;
	body.css('padding-top', navbarHeight + categoryNavHeight);
	categoryNav.css('top', navbarHeight);
	});
	// Adjusting spacing for fixed Navbar
	document.addEventListener('DOMContentLoaded', function (event) {
	var navbar = document.querySelectorAll('.navbar')[0];
	var navbarHeight = navbar.getBoundingClientRect().height;
	var categoryNav = document.querySelectorAll('.category-nav')[0];
	var categoryNavHeight = categoryNav.getBoundingClientRect().height;
	document.body.style.paddingTop = navbarHeight + categoryNavHeight + 'px';
	categoryNav.style.top = navbarHeight + 'px';
	});