Question

我遇到的问题是状态栏会显示在页面内容上。问题是当我尝试计算内容的margin-top（这显示内容正确）时，状态栏高度始终返回0 px，因为状态栏在页面加载后显示。

有没有办法动态检查div #statusbar是否显示？ LIVE？

像这样，但是动态地：

$('#statusbar').is(':visible') {
  $('.content').css('margin-top', $('#statusbar').height());
}

我正在为SharePoint打造品牌，以便框架显示状态栏。有了这种布局，我就不能用css来做这件事了。

检查此代码：这就是发生的事情。

http://jsfiddle.net/qcbDy/12/

示例的延迟只是让你们了解发生了什么。加载DOM /站点后，将显示状态栏。

我需要听一下特定选择器的变化。（身高/能力等）

解决方案

http://www.west-wind.com/weblog/posts/2011/Feb/22/A-jQuery-Plugin-to-monitor-Html-Element-CSS-Changes

或

@naim shaikh提到

jQuery event to trigger action when a div is made visible

Answer 1

试试这篇文章。

jQuery event to trigger action when a div is made visible

Answer 2

如果将状态栏宽度和内容宽度设置为特定数字并使它们都向左浮动，该怎么办？然后，如果状态栏出现，css将自动按下内容！（我认为这会奏效）

例如html：

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

和css：

#wrapper {
   width: 900px;
   margin: 0 auto;
}

#status_bar {
   width: 900px;
   float: left;
}

#content {
   width: 900px;
   float: left;
}

也许您可以使用它：

$('.statsubar').delay(2000).fadeIn(400).
queue(function() {
    $('.statsubar').css({'position' : 'relative'});
    $(this).dequeue();        
});

尝试使用on（）方法：

var wrapper = $('#wrapper');


function test() {
var status = $('.statsubar');

status.css({'position' : 'relative'});
}

wrapper.on('load', '#statsubar', test);

对于'#wrapper'元素，使用从开头

加载的一个元素

如果原始DOM中不存在'.statsubar'div，但在此之后加载（通过ajax调用），这应该有效：

$('.statsubar').load(function() {
    $('.statsubar').css({'position' : 'relative'});
});

Answer 3

尝试在加载页面后执行代码：

$(document).ready(function() {
    // put your code here
});

动态检查div是否显示，jquery css（display：none / block）

3 个答案: