Can somebody help me to create a static sidebar in two column layout

Question

Please help me to make this right sidebar static when the user starts scrolling. I am new to responsive type webdesign. I tried to use the "position:fixed" property, but I dont know its feasibility in responsive design. Please help me. This is the link http://the-bootstrap.obenland.it/page-with-comments/

Answer 1

JSfiddle for you -- JSfiddle for you

Create a class like this :-

.fixed {

          position:fixed;
          right:88px; /*insert this aswell*/
       }

And use it with the sidebar section like below .

<section role="complementary" class="widget-area span4 fixed" id="secondary">

Answer 2

If you're looking to maintain the Responsive Web Design principles, simply applying position:fixed won't do the trick. If you want it to work nicely on smaller screens, you'll have to have conditional code. It'll have to be fixed on a "normal" screen, and you'll need to remove the class when the screen gets "too small". You'll also have to decide what "normal" and "too small" mean for you. See here for an example:

http://home.edgemontgeek.com/dev/stackoverflow/14919523/

Keep in mind that you'll also need to control for screen height. If the window isn't big enough to fit the fixed content, they won't be able to see it. You could consider having two columns that can be scrolled separately.

Answer 3

Use

.fixed{
left:0;
position:fixed;
top:Height_of_logo;
}

This will create a sidebar that leaves space for logo on top, but if you want the sidebar to slide up when user scrolls down and then stick when logo is out of scope then i'd suggest you to use Jquery plugin like this one

http://viget.com/inspire/jquery-stick-em

This site has very good documentation along with demo.