0

scrollToFixedプラグインを使用し て div の位置を修正しています。これが私が使用しているhtmlコードです

<div id="header">
</div><!-- header -->
<div class="clear"></div>
<div id="nav-top">
</div><!-- end nav-top -->
<div id="content">
    <div id ="nav-left">
    </div><!-- end nav-left -->
    <div id ="main-content">
    </div><!--end main-content -->
    <div class="clear"></div>
</div><!-- end content -->
<div id ="footer">
</div>

とcss

    *{
    margin:0px;
    padding:0px;
}
ul,li{
    list-style-type:none;
}
body{
    min-width:1024px;
    background-color:#F3F4F8;
    font-family:Verdana;
}
#header{
    width:100%;
    height:60px;
}
#nav-top{
    width:100%;
    height:30px;
    background-color:#1F415A;
}
#content{
    width:1024px;
    margin-left: auto;
    margin-right:auto;
    /*min-height:px;*/
    margin-top:30px;
    z-index: 1;
    position:relative;
}
#content #nav-left{
    width:172px;
    min-height:550px;
    border:1px solid #DBDFE8;
    float:left;
    background-color:#fff;
    position:fixed;
}
#content #main-content{
    /*margin-right:184px;*/
    float:right;
    width:828px;
    min-height:550px;
    border:1px solid #DBDFE8;
    background-color:#fff;
}
#footer{
    width:1024px;
    margin-right:auto;
    margin-left:auto;
    margin-top:20px;
    border-top:1px solid #B7B8BD;
    height:85px;
    padding:5px;
    font-size:10px;
    color: #6F7072; 
}
.clear{
    clear:both; 
}

ここにjqueryコードが入ります

$(document).ready(function(){  
        $('#nav-top').scrollToFixed();
        $('#nav-left').scrollToFixed({ marginTop:60,
        limit : $('#footer').offset().top - $('#nav-left').outerHeight() -19 - $('#nav-left').offset().top
        });
    });

問題:ウィンドウの幅が 1024px 以下の場合は完全に正常に動作しますが、ウィンドウの幅が 1024px を超える場合は、ここでjsFiddlenav-leftと重なっています。ドキュメントの幅を 1024px 以上に拡大してみてください。違い。ここで私を助けてください。main-content

編集：また、私はfooter来るのを避ける必要があるので、 innav-leftを使用する必要があります。制限を削除すると、 to のオーバーラップは停止しますが、toが とオーバーラップします。limitscrollToFixednav-leftmain-contentfooternav-left

4

1 に答える 1

0

スクロールバーを検出し、それに応じて scrollFixed 位置を削除する必要があります。次のコードを追加しました。

 $(window).resize(function() {

        if ($("body").width() > $(window).width()) {

            $('#content #nav-left').trigger('remove.ScrollToFixed');
        }
    });

ここに動作するデモがあります

于 2012-11-12T17:11:35.863 に答える