修复了与页脚不重叠的侧边栏

Question

当我向上/向下滚动页面时，我正在尝试创建一个固定在其位置的侧边栏。同时我希望它在到达页脚时停止滚动，这样侧栏就不会与页脚重叠。

我使用了这个插件http://mojotech.github.com/stickymojo/ 但是，我在实施中犯了一些错误。有人可以帮帮我吗？

修改

HTML

<div class="wrapper">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>
<div id="footer"></div>

CSS

.wrapper { width: 1000px }
#sidebar { float: left; width: 164px }

页脚是从一个名为footer.phtml的文件中获取的。我在footer.phtml中添加了这个文件

<script type="text/javascript" src="js/stickyMojo.js"></script>
<script>
    $(document).ready(function(){
        $('#sidebar').stickyMojo({ footerID: '#footer', contentID: '#content' });
    });
</script>

脚本stickyMojo.js显示在资源中，但侧边栏不会坚持它的位置。

Answer 1

查看您的代码，我认为您的#footer内部#wrapper <{1}}导致了问题。

你可以比较的

Here's a working fiddle。

修改

Here's a fiddle页脚在包装器外面。

对于在用户滚动时加载额外内容，插件似乎自动处理#sidebar的“粘性”。只需确保加载的内容会影响height div的#main。

Here's a fiddle演示如何操作。