Floating sidebar for twentythirteen

The javascript code to make the sidebar float and stick to screen as you scroll down. This code is specific to twentythirteen wordpress theme and most probably won’t work with any other theme.

I didn’t like it when the sidebar area goes blank as i scroll down the page. The content in the main content area(towards left) is more than the content(widgets) in sidebar(towards right) so as one scrolls down the page, the sidebar area becomes empty.

The following javascript does the trick. As you scroll down the page and scroll past the bottom of sidebar, the sidebar sticks to the bottom right of the page. You keep going down and it stays there. And when you scroll up to a sufficient height, it again acquires its normal position. The script also prevents sidebar from overlapping with ‘header’ and ‘footer’ areas.

Any demo ? : yes, this very page(or any other page on this website) is a live demo of the script. Try scolling!! Its more apparent on longer pages like home page.
This script results in nice dirty trick on this website. On a fresh page reload, you don’t see ads in the sidebar becuase that widget at the end of the sidebar and becomes visible only when you scroll down. And once you scroll down, only those ads are visible, and you can’t get rid of them 🙂 🙂 ..

This site no longer uses twentythirteen, so no demo. Its time for twentyfourteen!

Anyway so here’s the javascript, you can save it in any of the existing javascript of your theme or save it as a new file and enqueue the file properly:

That’s it here. I didn’t bother to check it in IE! so be warned 🙂