Sticky right sidebar with Bootstrap

Question

I'm trying to make a sticky sidebar in Bootstrap similar to what Facebook has for example. I've tried using "affix", but the sidebar's content just shifted to the left, overlapping the main content. I've tried adding "right:0;", but then it would overflow the grid system.

My code's really basic so far, because the development is dependent on this fixed right sidebar feature, but here it is:

<div class="container">
    <div class="row">
        <div class="col-md-9">
            A bunch of Lorem Ipsum text.
        </div>
        <div class="col-md-3 affix">
            <h1>Sticky sidebar</h1>
        </div>
    </div>
</div>

Does anyone have any suggestions on how to make this work?

Thanks!

score 2 · Answer 1 · answered Apr 30 '17 at 13:03

body {
  background: pink;
}

.sticky {
  background: white;
  position: fixed;
  top: 0;
  right: 0;
}

<body>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
  <h1>Hi</h1>
</body>

<div class="sticky">
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
  <p>sticky sidebar</p>
</div>

You want something like this?

You use the css positon:fixed; and top:0;right:0; sticks the div in the top right corner

Sticky right sidebar with Bootstrap

1 Answers1