jQuery Girl
  1. jQuery Girl
  3. La barre de navigation collante fait remonter le contenu en remontant
Intereting Posts
Jquery / Javascript – Ajout d’une variable d’années à ce jour jquery datepicker ne montre pas la deuxième fois l’option de bouton de désactivation des données avec ne fonctionne pas sur Chrome Fonctionne dans jsFiddle mais pas dans mon site jQuery remplace les espaces dans Word jquery / css: faire défiler le texte à l’intérieur de div horizontalement comme un ticker de news sans plugin Comment utiliser jQuery au lieu de Prototype dans une application Rails 3? Lecture de fichiers en morceaux avec AJAX + Javascript jquery valider: si le formulaire est valide puis montrer le bouton d’envoi changer une image avec les positions de la souris Est-il possible de référencer un object dans le même object? Comment dire à Bootstrap Carousel de sauter un élément ou une classe? Le rechargement du navigateur ne réinitialise pas la page en haut Enregistrement de JQuery vers le service WCF Efficacité de la bande passante d’interrogation sur le chat Ajax

La barre de navigation collante fait remonter le contenu en remontant

J’ai un site simple mis en place avec un en-tête, une barre de navigation et du contenu. Lorsque la page atteint la barre de navigation, la position devient fixe et la barre de navigation se situe en haut de la page. À ce stade, la hauteur de la barre de navigation devient également un peu plus petite (comme j’aime cet effet). , fixe et plus mince à la barre de navigation.

La plupart des gens sont conscients du problème qui survient lorsque vous ajoutez “position: fixed” à un élément en ligne, en ce sens que le contenu “saute” soudainement vers le haut. Pour contrer cela, j’ai ajouté un div appelé “stop_the_jump” qui est caché jusqu’à ce que la barre de navigation devienne fixe, à quel point elle est affichée à sa place. Tout cela se passe bien en descendant, mais en remontant, vous obtenez un saut parce que la barre de navigation est maintenant plus fine.

Je tire mes cheveux sur celui-ci, comment puis-je éliminer ce saut qui se produit sur le chemin du retour.

Voici un JSFiddle montrant clairement mon problème: http://jsfiddle.net/gnac14qa/

Mon code jQuery est le suivant: 

$(window).scroll(function() { var Scroll = $(window).scrollTop(); var ScrollFXfullHeight = $('.header-wrapper').height(); if (Scroll == ScrollFXfullHeight) { $("#navigation").addClass("fixed"); $(".stop_the_jump").css('display','block'); } else if (Scroll > ScrollFXfullHeight) { if(!$("#navigation").hasClass('fixed')) { $(".stop_the_jump").css('display','block'); $("#navigation").addClass("fixed"); } $("#navigation").addClass("thinner"); } else { $("#navigation").removeClass("thinner fixed"); $(".stop_the_jump").removeClass("thinner"); $(".stop_the_jump").css('display','none'); } });

Toute aide serait très appréciée.

Le saut est créé parce que vous modifiez les hauteurs de la barre de navigation lorsque celles-ci sont fixes et non fixes (60px vs 80px). Cela provoque une incompatibilité dans l’espace entre le bas de la barre de navigation et le haut du contenu statique. Vous pouvez rendre cette transition un peu meilleure avec le code suivant (mais si vous envisagez de ne pas modifier la hauteur de la barre de navigation, ou si vous créez des incréments plus petits dans lesquels vous augmentez / diminuez la taille de la barre de navigation en fonction de l’emplacement du défilement, démo ici: http://jsfiddle.net/gnac14qa/3/ 

 if (Scroll-18 == ScrollFXfullHeight) { // 18 looks better, the offset is actual 20px but 20 looks choppy $("#navigation").addClass("fixed"); $(".stop_the_jump").css('display','block'); } else if (Scroll-22 > ScrollFXfullHeight) { // 22 looks better for the same reason above if(!$("#navigation").hasClass('fixed')) { $(".stop_the_jump").css('display','block'); $("#navigation").addClass("fixed"); } $("#navigation").addClass("thinner"); }

De plus, vous avez deux références de classe css identiques. Vous pouvez simplement les combiner. 

 .stop_the_jump { width:100%; float:none; display:none; background:green; } .stop_the_jump { height:80px; // can be moved to the class above }

Voici ce que je veux dire par ne pas changer la hauteur de la barre de navigation: http://jsfiddle.net/gnac14qa/4/ 

 #navigation.thinner { width:100%; height:80px !important; //kept at 80px instead of changing to 60px }

Ok, j’ai trouvé une solution basée sur les réponses ci-dessus. Le problème est essentiellement causé par le fait que a) la barre de navigation est redimensionnée ainsi que devient fixe et b) que la barre de navigation est redimensionnée avec une transition – il ne s’agit donc pas d’un changement immédiat de taille.

La façon dont j’ai contourné cela est de mettre en scène le changement d’atsortingbut de position et le changement de taille. La position devient fixe en même temps que le div “stop_the_jump”, puis une fois que la page efface la hauteur de “stop_the_jump” (qui a la même taille que le menu), la classe “thin” est ajoutée, ce qui rend la menu diluant.

Cela fonctionne maintenant de manière transparente. Merci aux réponses ci-dessus pour m’avoir orienté dans la bonne direction – voici mon code final: 

 $(window).scroll(function() { var Scroll = $(window).scrollTop(); var ScrollFXfullHeight = $('.header-wrapper').height(); if (Scroll == ScrollFXfullHeight) { $("#navigation").addClass("fixed"); $(".stop_the_jump").css('display','block'); } else if (Scroll > ScrollFXfullHeight) { if(!$("#navigation").hasClass('fixed')) { $(".stop_the_jump").css('display','block'); $("#navigation").addClass("fixed"); } if (Scroll > ScrollFXfullHeight+80) { $("#navigation").addClass("thinner"); } else { $("#navigation").removeClass("thinner"); } } else { $("#navigation").removeClass("thinner fixed"); $(".stop_the_jump").removeClass("thinner"); $(".stop_the_jump").css('display','none'); } });

et un lien vers le JSfiddle mis à jour: http://jsfiddle.net/gnac14qa/6/