Floating/fixed sidebar using CSS

As seen in my current theme and on my portfolio, there is a mini sidebar which stays fixed no matter where I scroll on the page. This is useful if you have certain links or information that you’d like your readers to notice. In my blog’s case, I have my subscribe button, a few major social networks, and some important links that I want accessible to my viewers at all times. In the case of my portfolio, the footer stays fixed and my visitors can have access to important links without having to scroll back and forth.

To achieve a fixed sidebar or footer, first create a <div>, and let’s give it an id="fixed". So in your CSS stylesheet, you’ll put:

The position: fixed; is the key for making the sidebar stay put! Next, we must define the location of the sidebar, i.e., where do you want it to stay on the screen? You can use properties like top or bottom to define how far down the top or how far up from the bottom your div layer will be. For me, it was 200px down from the top.

But wait, how did I get my sidebar to stay somewhat in the middle, right next to the “main” component of my theme? It’s simple: you just place the <div id="fixed"> inside another <div>, which wrapped everything together. Of course, you can also use a left property within the #fixed selector to define how far from the left you want your sidebar to be. However, when the screen width changes, that sidebar will remain fixed while everything else (which isn’t fixed) will move. This can make your layout look a little wonky

So what if you don’t want a fixed sidebar, but one that “floats” as you scroll up and down? This will require some jquery in addition to the CSS. You can find an in-depth tutorial on floating sidebars at CSS-Tricks.

Hope you all enjoyed this tutorial! Error processing request

You might like these posts: