web-dev-qa-db-fra.com

En-tête de défilement lisse avec position fixe

Comment créer un défilement régulier lorsque je modifie la position sur fixe. J'essaie d'ajouter l'animation mais cela ne fonctionne pas. Mieux utiliser jquery animation ();

$(window).scroll(function() {
  var sticky = $('.mobile-menu'),
    scroll = $(window).scrollTop();

  if (scroll >= 40) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});
header {
  padding: 20px 40px;
  background: gray;
  width: 100%;
  -webkit-transition: position 10s;
  -moz-transition: position 10s;
  -ms-transition: position 10s;
  -o-transition: position 10s;
  transition: position 10s;
}
section {
  height: 150vh;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="mobile-menu">Text here</header>
<section>Sugar Plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry Lollipop Gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake
  gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar Plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</section>

jqueryhtmlcsssmooth-scrolling
4
Palaniichuk Dmytro

Vous pouvez utiliser @keyframes pour ajouter des effets de transition au défilement.

$(window).scroll(function() {
  var sticky = $('.mobile-menu'),
    scroll = $(window).scrollTop();
   
  if (scroll >= 40) { 
    sticky.addClass('fixed'); }
  else { 
   sticky.removeClass('fixed');

}
});
header {
  padding: 20px 40px;
  background: gray;
  width: 100%;
  
  -webkit-transition: all 0.5s ease;
  -moz-transition: position 10s;
  -ms-transition: position 10s;
  -o-transition: position 10s;
  transition: all 0.5s ease;
}
section {
  height: 150vh;
}


.fixed {
  position: fixed;
  top: 0;
  left: 0;
  animation: smoothScroll 1s forwards;
}
@keyframes smoothScroll {
	0% {
		transform: translateY(-40px);
	}
	100% {
		transform: translateY(0px);
	}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="mobile-menu">Text here</header>
<section>Sugar Plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry Lollipop Gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake
  gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar Plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</section>

5
Yonas Hailu

Édité sur la base de commentaires.

Si vous changez position en fixed lors du défilement, un comportement de saut indésirable sera généré. 

Votre meilleur pari serait d’empêcher le positionnement lors du défilement, régler fixed après 40px ou depuis le début est à peu près identique, je vous suggère donc de supprimer cette partie de votre jQuery et de définir votre headerfixed dès le début:

//if (scroll >= 40) sticky.addClass('fixed');
//else sticky.removeClass('fixed');

Extrait ci-dessous:

$(window).scroll(function() {
  var sticky = $('.mobile-menu'),
    scroll = $(window).scrollTop();
});
body {
  position: relative;
}
header {
  padding: 20px 40px;
  background: gray;
  width: 100%;
  -webkit-transition: position 10s;
  -moz-transition: position 10s;
  -ms-transition: position 10s;
  -o-transition: position 10s;
  transition: position 10s;
}
section {
  height: 150vh;
  position: relative;
  top: 60px;
}
.fixed {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="mobile-menu fixed">Text here</header>
<section>Sugar Plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry Lollipop Gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake
  gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar Plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</section>

2
Syden

Si vous cherchez un moyen simple et efficace d’implémenter un en-tête collant, je vous suggère d’utiliser Bootstrap. Il est facile d'y aller et tout le travail lourd est déjà fait pour vous.

Suivez le démarrage rapide

https://v4-alpha.getbootstrap.com/getting-started/introduction/#quick-start

Ajoutez le nom de classe "navbar-fixed-top" à votre navigation et c'est tout. De là, vous avez un nav similaire collant avec un démarrage simple.

0
Jack O