Me gustaría saber si hay una forma de agregar o eliminar clases según la altura del navegador. En este momento, estoy comparando un div con la altura del navegador y le agrego una clase si la altura del navegador es más alta que la altura del div al hacer esto:
if (($(window).height()) > $(".sidebar").height()) { $("#widget-area").addClass("fixed"); } else { }Esto funciona ya que la clase se agrega cuando se cumple la condición. El problema es que si el usuario cambia el tamaño de la altura del navegador, la clase que se agregó se mantendrá agregada incluso si la condición ya no se cumple.
¿Hay alguna manera de escuchar la altura del navegador y agregar o eliminar esta clase sin importar si el navegador cambia de tamaño más adelante?
EDITAR:
Sé que muchos de ustedes podrían sugerir hacer esto mediante consultas de medios, pero necesito que esto se haga con jQuery.
He agregado la ventana en la función de cambio de tamaño como se sugiere. El problema es que el script solo se ejecutará si se cambia el tamaño del navegador. Necesito que se ejecute tan pronto como el documento esté listo y si el navegador también cambia de tamaño. Aquí está mi código:
$(window).on('resize', function(){ if (($(window).height()) > $(".sidebar").height()) { $("#widget-area").addClass("fixed"); } else { } });Las consultas de medios CSS son una buena manera de hacer este trabajo. Pero si desea usar jQuery, debe ejecutar el código cuando cambie el tamaño de la ventana.
$(window).resize(function(){ if ($(window).height() > $(".sidebar").height()) $("#widget-area").addClass("fixed"); else $("#widget-area").removeClass("fixed"); }); Además, si desea ejecutar el código cuando se carga la página, use .on() y agregue dos controladores de eventos.
$(window).on('load resize', function(){ if ($(window).height() > $(".sidebar").height()) $("#widget-area").addClass("fixed"); else $("#widget-area").removeClass("fixed"); });Ver el resultado del código en la demostración
Solución a través de javascript:
Si .sidebar tiene una altura dinámica, aquí hay un enfoque usando 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); Solución a través de CSS @media consulta:
Si .sidebar tiene una altura fija de 400px (por ejemplo), la consulta CSS @media sería la siguiente:
@media screen and (min-height: 401px ) { #widget-area { [... STYLES HERE...] } }Cree una función para manipular su dom en su caso, agregue y elimine clases. Y llame a esa función en la función document.ready y la función window.resize. Vea a continuación un ejemplo de trabajo
http://codepen.io/harishgadiya/pen/VpNXmB
HTML
<div id="wrapper"></div>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)