La barre de navigation se déplace vers le haut lorsque la page défile vers le bas

Question

J'ai récemment trouvé cette page et je voulais copier sa barre de navigation pour mon site Web.

Comme vous le constatez, lorsque la page est chargée, la barre de navigation utilise un arrière-plan transparent et présente un remplissage. Mais quand l'utilisateur fait défiler vers le bas, la barre glisse vers le haut et reste en haut. Assez étonnant!

http://whois.domaintools.com/

Si je ne me trompe pas bootstrap a été utilisé pour la barre de navigation lui-même, mais je ne sais pas comment ils font glisser vers le haut quand Scolling vers le bas.

Quelqu'un a une idée de comment cela peut être accompli?

Merci :) Jiachen

Answer 1

Il est fait à l'aide réglage de la position à fixe et de haut en 0px. Il continue à vérifier le décalage de la barre de navigation et une fois qu'il a atteint le haut, il le fixe avec le top 0px. Vous pouvez trouver un exemple de travail How to Bootstrap navbar static to fixed on scroll?. Où vous pouvez trouver l'URL de travail JSFiddle.

Espérons que cela vous aide à comprendre comment cela est fait.