Discussion :

[defacta]

Bonjour,

J'ai pu redimensionner la navbar de Bootstrap sur le scroll down mais l'effet n'est pas lisse sur la fin. Le dernier palier se fait comme une marche d'escalier.

Je redimensionne avec la transition CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;

Et le jQuery:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(window).scroll(function() {
  if ($(document).scrollTop() > 70) {
    $("nav").addClass("shrink");
  } else {
    $("nav").removeClass("shrink");
  }
});

J'ai mis un example ici : https://jsfiddle.net/h5vm95n5/ Vous pouvez voir la marche d'escalier sur la fin ?

Comment faire l'effet lisse juqu'au bout ?
Merci.

[Invité]

Bonjour,

cet effet "escalier" n'arrive que quand les 2 menus sont superposés, et qu'en scrollant, ils passent l'un à coté de l'autre.

Il n'y a pas grand chose à faire coté CSS...

...à part gérer les largeurs de chaque menu (?) pour qu'ils restent toujours cote-à-cote.
Mais bon, dans ce cas :

• quel intérêt de 2 menus ?
• il suffit de rajouter un onglet "Another page 2" pour tout foutre en l'air...

[defacta]

En fait, cela vient du changement de la taille des fonts, en les passant de 16px à 15px.

Dans cet exemple, il n'y a plus de changement de font et l'animation est bien lisse:
https://jsfiddle.net/h5vm95n5/1/

J'ai réussi avec Firefox à gérer le changement de font sans avoir de cassure sur la fin à l'effet avec "ease-out" à la place de "ease" et en mettant un "transition: transform 0.4s;" dans "nav.shrink a". Mais j'ai toujours le soucis avec Chrome, c'est pas lisse du tout.

Donc pour l'instant la seule solution est de rester à une font de 16px.

PS: Edge est le navigateur qui se comporte le mieux. Mais bon, celui qui compte le plus maintenant est Chrome