Attention, c'est dépendant de jQuery, evidemment !

Utile pour “fixer” un élément, généralement le header, dès qu'on scrolle, afin d'avoir un menu fixe

fixed.js

$(document).on( 'scroll', function()
	{
	var dheight=$('body').height()-$(window).height();
	var aTop = $('header').height();
 
	if ( $(this).scrollTop()>=aTop && !$('header').hasClass("fixed"))
		$('header').addClass("fixed");
	else if ( $(this).scrollTop()==0 && $('header').hasClass("fixed"))
		$('header').removeClass("fixed");
        });

Dès que le scroll atteint la taille de l'élément header, le header devient .fixed et inversement.

Exemple de CSS appliqué au fixed :

.fixed {
    position:fixed;
    box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.8);
    padding: 0 0 1.4rem 0;
    height: 60px;
    }