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

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的事实。

这是一个你可以比较的工作小提琴。

编辑

这是包装器外的页脚的小提琴。

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

这是一个演示如何做到这一点的小提琴。