bloquer un div en haut de page lors d'un scroll vertical

Question

Hello,

je suis en train d'essayer de reproduire l'effet qu'on peut voir sur le site de Deezer : Deezer, à savoir lorsqu'on fait un scroll vertical la partie du menu en haut qui contient le logo disparaît mais la partie du menu qui contient le lecteur reste bloquée en haut de page.
bref, j'ai essayé en bricolant ce script :

window.onscroll = function() {
    var scroll = (document.documentElement.scrollTop || document.body.scrollTop);
    if(scroll>70){
        document.getElementById('bloc').style.top = scroll+'px';
 document.getElementById('bloc2').style.top = scroll+'px';
}else if(scroll<70 || scroll == 70){
document.getElementById('bloc').style.top = '70px';
document.getElementById('bloc2').style.top = '70px';
}
}

Ca fonctionne bien mais un petit problème me chagrine : la partie que je souhaite bloquer est bien bloquée mais de légers sursauts l'anime et donnent ainsi un rendu qui n'est pas des plus heureux.
Donc si quelqu'un avait une suggestion pour améliorer ma fonction et permettre ainsi d'avoir un rendu propre comme sur le site de Deezer je suis preneur .

Merci ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

@karamel · Answer

ce qu'il faudrait c'est mettre la barre en position fixed au moment desiré

et aussi

else if(scroll<70 || scroll == 70)

en plus court sa donne

else if(scroll<= 70)

BBFUNK01 · Answer

Hello,

merci pour ta réponse rapide. Pour ce qui est de mettre la barre en position fixed lorsque besoin est j'y avais pensé, le truc c'est qu'en testant dan les différents navigateurs je m'aperçois que le "bug" est uniquement visible dans Firefox, sous Safari et Chrome c'est fluide... Donc peut-être que "la vérité est ailleurs" .

A plus ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

Bloquer un div en haut de page lors d'un scroll vertical

2 réponses

Votre réponse

Discussions similaires