Comment ajouter ou supprimer des classes en fonction de la hauteur du navigateur en redimensionnant en utilisant jQuery?

Question

Je voudrais savoir s'il existe un moyen d'ajouter ou de supprimer des classes en fonction de la hauteur du navigateur. En ce moment, je compare une div à la hauteur du navigateur et j'ajoute une classe si la hauteur du navigateur est supérieure à la hauteur de la div en faisant ceci :

if (($(window).height()) > $(".sidebar").height()) {
    $("#widget-area").addClass("fixed");
} else {

}

Cela fonctionne car la classe est ajoutée lorsque la condition est remplie. Le problème est que si l'utilisateur redimensionne la hauteur du navigateur, la classe qui a été ajoutée restera même si la condition n'est plus remplie.

Y a-t-il un moyen d'écouter la hauteur du navigateur et d'ajouter ou de supprimer cette classe, peu importe si le navigateur est redimensionné plus tard ?

ÉDITER :

Je sais que beaucoup d'entre vous pourraient suggérer de le faire par des media queries mais j'ai besoin que cela soit fait en utilisant jQuery.

J'ai ajouté la fonction window on resize comme suggéré. Le problème est que le script ne s'exécutera que si le navigateur est redimensionné. J'ai besoin qu'il s'exécute dès que le document est prêt et si le navigateur est redimensionné également. Voici mon code :

$(window).on('resize', function(){
    if (($(window).height()) > $(".sidebar").height()) {
        $("#widget-area").addClass("fixed");
    } else {

    }
});

Answer 1

Les requêtes média CSS est un bon moyen de faire ce travail. Mais si vous voulez utiliser jQuery, vous devriez exécuter le code lorsque la fenêtre est redimensionnée.

$(window).resize(function(){
  if ($(window).height() > $(".sidebar").height())
    $("#widget-area").addClass("fixed");
  else
    $("#widget-area").removeClass("fixed");
});

Aussi si vous voulez exécuter du code lorsque la page se charge, utilisez .on() et ajoutez deux gestionnaires d'événements.

$(window).on('load resize', function(){
  if ($(window).height() > $(".sidebar").height())
    $("#widget-area").addClass("fixed");
  else
    $("#widget-area").removeClass("fixed");
});

Voir le résultat du code dans démonstration

Answer 2

Solution via javascript:

Si .sidebar a une hauteur dynamique, voici une approche utilisant javascript:

function updateWidgetAreaClassList() {
    var widgetArea = document.getElementById('widget-area');
    var sideBar = document.getElementsByClassName('sidebar')[0];

    if (window.innerHeight > sideBar.offsetHeight) {
        widgetArea.classList.add('fixed');
    }

    else {
        widgetArea.classList.remove('fixed');
    }
}

window.addEventListener('resize', updateWidgetAreaClassList, false);

---

Solution via CSS @media query:

Si .sidebar a une hauteur fixe de 400px (par exemple), la requête CSS @media serait la suivante:

@media screen and (min-height: 401px ) {

#widget-area { [... STYLES ICI...] }

}

Answer 3

Créez une fonction pour manipuler votre DOM dans votre cas, ajoutez et supprimez des classes. Et appelez cette fonction dans la fonction document.ready et la fonction window.resize. Voir ci-dessous un exemple fonctionnel

http://codepen.io/harishgadiya/pen/VpNXmB

HTML

css

#wrapper{
  height:300px;
  width:300px;
  background:#999
}
.red{
  background:red !important;

}

JS

function resize(){
  var windowHeight = $(window).height();
  var wrapperHeight = $('#wrapper').height();
  console.log(windowHeight , wrapperHeight)
  if(windowHeight > wrapperHeight) $('#wrapper').addClass("red");
  else $('#wrapper').removeClass("red");
}
$(document).ready(function(){
  resize()
});

$(window).resize(resize)

Answer 4

Bien que j'aie vu dans une réponse ci-dessus $(window).on('load resize', function(){.. qui devrait faire l'affaire, vous pouvez également faire quelque chose comme ceci :

var handleResize = function(){
  if (($(window).height()) > $(".sidebar").height()) {
        $("#widget-area").addClass("fixed");
  } else {
  //autre chose
  } 
}
  $(document).ready(function(){
    handleResize();
  })
  $(window).on('resize', function(){
    handleResize();
  });

Answer 5

Allez pour la requête des médias
@media only screen and (max-height: 500px) {

.fixe: 100px;

}