Question

I am trying to create a sidebar that remains fixed at it’s position when I scroll the page up/down. At the same time I want it stop scrolling when footer is reached so that the sidebar doesn’t overlap with footer.

I used this plugin http://mojotech.github.com/stickymojo/
However, I am making some mistake in it’s implementation. Can somebody please help me with this?

Edit

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 }

The footer is fetched from a file called footer.phtml I have added this in footer.phtml

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

The script stickyMojo.js shows up in the resources, but the sidebar doesn’t stick to it’s position.

Answer 1

Looking at your code, I believe it’s the fact that you don’t have your #footer inside your #wrapper that’s causing the issue.

Here’s a working fiddle that you can compare.

Edit

Here’s a fiddle with the footer outside the wrapper.

As for loading extra content as the user scrolls, the plugin seems to handle the ‘stickyness’ of the #sidebar automatically. Just make sure the loaded content affects the height of the #main div.

Here’s a fiddle that demonstrates how to do it.