如何使用 jquery 根据浏览器高度调整大小添加或删除类？

Question

我想知道是否有一种方法可以根据浏览器的高度添加或删除 classes。现在，我正在将 div 与浏览器高度进行比较，如果浏览器的高度高于 div 高度，我将向其添加 class，方法是：

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

}

这是有效的，因为在满足条件时添加了 class。问题是，如果用户调整浏览器的高度，添加的 class 即使不再满足条件也会继续添加。

有没有办法监听浏览器的高度并添加或删除这个 class 无论以后浏览器是否调整大小？

编辑：

我知道你们中的很多人可能会建议通过媒体查询来完成此操作，但我需要使用 jQuery.

来完成此操作

我已经按照建议添加了 window on resize 功能。问题是如果调整浏览器大小，脚本只会运行。一旦文档准备好并且浏览器也调整了大小，我就需要它运行。这是我的代码：

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

    }
});

Answer 1

Go for media query
@media only screen and (max-height: 500px) {

.fixed :100px;



}

Answer 2

CSS media queries 是完成这项工作的好方法。但是如果你想使用jQuery，你应该运行 window调整大小时的代码。

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

此外，如果您想在页面加载时运行编码，请使用 .on() 并向其添加两个事件处理程序。

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

查看 demo

中的代码结果

Answer 3

通过javascript解决：

如果 .sidebar 有动态高度，这里是使用 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);

通过CSS@media查询的解决方案：

如果 .sidebar 的固定高度为 400px（例如），则 CSS @media 查询将如下所示：

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

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

}

Answer 4

创建一个函数来操纵您的 dom 在您的案例中添加和删除类。并在 document.ready 函数和 window.resize 函数中调用该函数。请参阅下面的工作示例

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)

Answer 5

虽然我在上面的回答中看到 $(window).on('load resize', function(){.. 应该可以完成这项工作，但您也可以这样做：

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

如何使用 jquery 根据浏览器高度调整大小添加或删除类？

How to add or remove classes based on browser height resize using jquery?

html

javascript

jquery

window-resize

如何使用 jquery 根据浏览器高度调整大小添加或删除 类？

How to add or remove classes based on browser height resize using jquery?

html

javascript

jquery

window-resize

如何使用 jquery 根据浏览器高度调整大小添加或删除类？