Question

我正在使用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时，nav-left与main-content重叠是jsFiddle同样的尝试扩展文档的宽度超过1024px你可以看到差异。请帮帮我。

修改我还需要避免footer进入nav-left，因此我必须在limit中使用scrollToFixed。如果我删除了nav-left上main-content的限制重叠停止，但它会使footer与nav-left重叠。

Answer 1

您需要检测滚动条并相应地删除scrollFixed位置。我添加了以下代码：

 $(window).resize(function() {

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

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

这是 working DEMO

固定Div使用scrollToFixed插件进入相邻的浮动div

1 个答案: