Javascript Girl
  1. Javascript Girl
  3. Fade in / Fade out barre de navigation
Intereting Posts
Utilisez google maps computeDistanceBetween pour obtenir l'emplacement le plus proche renvoie NaN Qu'est-ce que "Splats" signifie dans le tutoriel CoffeeScript? Appuyez deux fois sur safari mobile YUI Compressor Maven plugin exécuté au mauvais moment et Tomcat plugin ne pas utiliser Yui-sortie du compresseur AngularJS et Internet Explorer Boîte d'alerte Fermer Javascript Modifiez le thème du site Web réactif sur le clic du bouton PHP: insérez plusieurs cases à cocher dans une seule colonne MySQL Déterminer la taille d'affichage réelle dans le navigateur Chargez jQuery avec Javascript et utilisez jQuery Redux ne met pas à jour les composants lorsque les propriétés de l'état Immutable profond sont mises à jour Jersey 2: rendre Swagger le contenu statique correctement sans barre oblique (/) Tous les mouvements possibles dans une grille 5×5? JavaScript: {} == false est un SyntaxError? Comment faire pour manipuler les poignées de traction du navigateur, Highstock

Fade in / Fade out barre de navigation

J'essaie de configurer ma barre de navigation pour rester fixe et disparaître à l'opacité 0.8 lorsque je me déplace vers le bas et retourne à sa position et à son opacité normales lorsque je me défile.

Mon code jquery est: 

jQuery(document).ready(function(){ var navOffset = jQuery("nav").offset().top; jQuery(window).scroll(function(){ var scrollPos = jQuery(window).scrollTop(); if(scrollPos > navOffset) { jQuery("nav").addClass("fixed"); jQuery("nav").fadeTo(1500,0.5); } else { jQuery("nav").removeClass("fixed"); jQuery("nav").fadeTo(1500,1); } }); });

Et mon code css est: 

 .fixed { position:fixed; top:0; }

Il s'efface lorsque je me déplace vers le bas mais ne retourne pas à son opacité d'origine lorsque je me déplace de nouveau. Je suis nouveau pour jQuery.

Je pense que le problème est que vous configurez la fonction fadeTo à chaque tir de l'événement de scroll . Ainsi, lorsque vous faites défiler vers le bas, vous ajoutez beaucoup d'appels "fade out" à la file d'effets d'animation. Lorsque vous faites défiler vers l'arrière, tous les effets de «décoloration» (dont chacun prend 1,5 seconde) doivent être terminés avant que le premier appel «décoloration» ne soit effectué.

Vous pouvez résoudre ce problème en ajoutant un appel au .stop(true) de jQuery .stop(true) afin que chaque événement de défilement efface la file d'animation: 

 jQuery(document).ready(function() { var navOffset = jQuery("nav").offset().top; jQuery(window).scroll(function() { var scrollPos = jQuery(window).scrollTop(); jQuery("nav").stop(true); if (scrollPos > navOffset) { jQuery("nav").addClass("fixed"); jQuery("nav").fadeTo(1500, 0.5); } else { jQuery("nav").removeClass("fixed"); jQuery("nav").fadeTo(1500, 1.0); } }); }); 
 body { height: 4096px; padding-top: 32px; } nav { height: 128px; width: 100%; border: 1px solid black; background-color: #00aa00; } .fixed { position: fixed; top: 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>so</title> <meta charset="UTF-8"> </head> <body> <nav></nav> </body> </html>

Il y a une autre solution pour faire cela? Parce que lorsque je me déplace de nouveau, le temps qu'il faut pour l'action "fadeTo" est très retardé (~ 4 secconds), je ne pense pas que ce soit normal.