1

ページの上部にマスクとして機能しているdivがあります。ページ自体のコンテンツは、ページの中央に配置されます（cssを参照）。jQueryを使用して、ウィンドウの上部から#navdivまでの距離に基づいて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);
});

簡単ですが、ウィンドウのサイズが変更された場合は、高さを更新してもらいたいと思います。

4

2 に答える 2

2

メソッドを使用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
});
于 2013-03-17T20:23:39.053 に答える
0

スクリプト全体を関数に入れ、document.readyと$（window）.resize（）の両方でその関数を呼び出します。

于 2013-03-17T20:24:13.717 に答える