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

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

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

}

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

是否有一种方法可以监听浏览器的高度，并在以后调整浏览器大小时添加或删除此类

编辑：

我知道很多人可能会建议通过媒体查询来实现这一点，但我需要使用jQuery来实现这一点

我已经按照建议添加了调整窗口大小的功能。问题是，只有调整浏览器的大小，脚本才会运行。我需要它运行，只要文件准备好，如果浏览器的大小以及。这是我的密码：

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

    }
});

CSS是完成这项工作的好方法。但如果您想使用jQuery，则应该在调整窗口大小时运行代码

$(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");
});

---

通过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...] }

}

---

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

HTML

<div id="wrapper"></div>

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)

---

虽然我已经在上面的回答中看到了

$（窗口）。在（'load resize'，function（）{..

上，您还可以执行以下操作：

var handleResize=function（）{
如果（$（window.height（））>$（“.sidebar”）.height（））{
$（“#小部件区域”）.addClass（“固定”）；
}否则{
//还有别的事
} 
}
$（文档）.ready（函数（）{
handleResize（）；
})
$（窗口）.on（'resize'，function（））{
handleResize（）；
})

不要使用JS-使用CSS在调整窗口大小时应运行代码。我始终建议使用CSS而不是JS来处理此问题，但如果您仍然希望这样做，则需要在

$（窗口）中添加代码。调整大小（函数（）{//code here/）}

谢谢@sTx。我已经添加了windows resize，但是现在脚本将仅在浏览器调整大小时运行。我希望它在加载文档和调整浏览器大小时运行。谢谢@RoryMcCrossan。但是，对于这个项目，我需要通过jQuery来实现。谢谢，但是这不是一个可行的解决方案，因为所有内容都是高度是可变的。没有固定的值。您好@Mohammad，我添加了您的第二个代码，它会在加载页面后加载，但如果浏览器调整大小，它不会删除类。@Johann如果窗口高度调整为小于300px，文本颜色变为黑色。测试提供的降级。这是真的，您的演示效果很好，这是正确的答案。您你可以发布它，我会把它标记为正确的。谢谢！

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

}

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)