Exo-brain

Parce que j'ai un cerveau, mais pas trop.

Outils pour utilisateurs

Outils du site


code:js:fixed-au-scroll

position fixed au scroll

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

Introduction

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");
        });

Explication

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;
    }
code/js/fixed-au-scroll.txt · Dernière modification: 23 Nov 2020 :: 16:15 de CgX