jquery - 修复了使用 scrollToFixed 插件进入相邻 float div 的 Div

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 重叠-左。

Answer 1

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

 $(window).resize(function() {

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

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

这里是 working DEMO