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进入，nav-left所以我必须使用limitin scrollToFixed。如果我删除限制重叠nav-lefton tomain-content会停止，但它会使footerto 重叠nav-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 回答