Question

我有一个div作为我页面顶部的面具。页面本身的内容绝对以页面为中心（参见css）。我使用jQuery根据#nav div距窗口顶部的距离给div .holder一个高度。

CSS：

#pagewrap 
{
    position:absolute;
    width:915px;
    margin-left:-458px;
    padding:0;
    left:50%;
    height:100%;
    margin-top:-330px;
    top:50%;
}

.holder 
{
    background: none repeat scroll 0 0 black;
    height: 0;
    position: fixed;
    top: 0;
    width: 915px;
    z-index: 10000;
}

#nav 
{
    position:fixed;
    text-align:center;
    width:915px;
    height:224px;
    margin:0 auto;
    background:url(nav-off.png) no-repeat scroll 0 0 transparent;
    z-index:1001;
    font-family:'Cabin',sans-serif;
}

使用Javascript：

var t = $("#nav");
var offset = t.offset();
$(function() 
{
    $(".holder").css("height" , offset.top);
});

很简单，但如果窗口大小发生变化，我想更新高度。

Answer 1

使用jQuery resize方法检测窗口大小更改。

$(window).resize(reset);

function reset(){
      var t = $("#nav");
       var offset = t.offset();
         $(function() {
              $(".holder").css("height" , offset.top);     
           });
}

$(document).ready(function(){
     reset();// set on page load
});

Answer 2

将整个脚本放入一个函数中，并在document.ready和$(window).resize()上调用该函数

根据窗口大小调整动态大小的div的高度

2 个答案: