Mauvais comportement navbar au dezoom
Bonjour, je viens vers vous aujourd'hui car je rencontre un problème et je ne vois pas comment le solutionner, il va peut-être vous paraître tout bête mais je débute un peu donc je suis pas encore au point :?
En gros j'ai une navbar positionné en bottom à 100% de la hauteur de l'écran via absolute, et au scroll quand la navbar atteint le top de la page elle passe en position fixed.
Tout fonctionne bien mais le soucis c'est que si la navbar est en mode fixed, et qu'on dezoom la page alors celle-ci remonte au delà de la position maximum où elle devrait être (son absolute de base n'est pas pris en compte) et peut donc remonter jusqu'en top 100% ce qui n'est pas voulu.
Je joins le
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| /* NAVBAR AVANT LE MODE STICKY */
.navbar
{
width: 100%;
height: 70px;
margin: 0;
position: absolute;
bottom: 0;
left: 0;
background: #4c0614;
}
/* PARAMÈTRES APPLIQUÉS QUAND LA NAVBAR PASSE EN MODE STICKY */
.fixedNav
{
position: fixed;
top: 0;
left: 0;
box-shadow: 4px 4px 10px #666;
} |
et le JS
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| $(document).ready(function() {
var stickyNavTop = $('.navbar').offset().top;
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.navbar').addClass('fixedNav');
}
else {
$('.navbar').removeClass('fixedNav');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
}); |
Merci de l'aide que vous pourrez m'apporter !
