Question

我想知道是否可以根据浏览器的高度添加或删除类。现在，我正在将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 {

    }
});

Answer 1

CSS media queries是完成这项工作的好方法。但是如果你想使用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");
});

请参阅demo

中的代码结果

Answer 2

通过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 3

在你的情况下创建一个操作你的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 4

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

＆＃13;

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

＆＃13;

Answer 5

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

.fixed :100px;



}

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

5 个答案: