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

Patrick Bass
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
Auteur

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>
betaWeb

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

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

$(window).innerWidth < 992px
betaWeb

@Khalysto: C'est plutôt

window.innerWidth < 992
Khalysto

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