Supprimer une classe en fonction de la taille de l'écran

Par Patrick Bass, il y a 11 ans

Javascript

Bonjour,
Depuis quelques heures je teste différentes portions de code destiné à supprimer la classe "nav-sidebar" de Bootstrap de telle façon que l'élément "div.nav-sidebar" reste fixe pour les écrans ayant une taille médium et plus (width >=992px) lors de la montée et descente de la barre verticale (scrollbar) et soit entrainé par le mouvement du scrollbar sur les tablettes et smartphones (max-width: 992px), mais les codes que j'écris comme celui ci-dessous ne donnent pas le résultat attendu. Une suggestion ?

<script type='text/javascript'> $(document).ready(function() { if($(window).width()>992){ $('.nav-sidebar').scrollToFixed({ marginTop: 160}); }else{ $('.nav-sidebar').removeClass('.nav-sidebar'); } }); </script>

Seule la clause "else" fonctionne dans ce cas de figure et quelque soit le type de média (smartphone, tablette, écran PC moyen, grand écran PC).

5 réponses

Patrick Bass, il y a 11 ans

Bonjour,
En réexaminant, je m'aperçois que c'est la condition sur le type de média qui n'est pas reconnue, car avec un code aussi simple que le suivant mon div n'est pas fixe dans la condition ">992". Une suggestion ?

<script type='text/javascript'> $(document).ready(function() { if($(window).width()<=992){ $('.nav-sidebar').removeClass('fixed'); } }); </script>
Khalysto, il y a 11 ans

Oups, oui, pardon, j'ai écrit trop vite et j'ai pas eu le temps de corriger...

betaWeb, il y a 11 ans

Pourquoi supprimer une classe via JS alors que tu peux gérer cela via ton CSS avec la propriété @media ?

@media all and (max-width: 992px){ .nav-sidebar{ position: fixed!important; } }
Khalysto, il y a 11 ans

By the way, pour tester la largeur de la fenêtre, c'est

$(window).innerWidth < 992px
betaWeb, il y a 11 ans

@Khalysto: C'est plutôt

window.innerWidth < 992