CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Dan
Dan

Reputation: 597

How to have a fixed column in Bootstrap?

I made a page with Bootstrap that has two columns like below:

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-body">Fixed</div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-body">text</div>
            </div>
        </div>
    </div>
</div>

I would like to make the first column fixed position so it stays while scrolling but the other one will be normal and holds long text.

How can I do it?

DEMO

Upvotes: 1

Views: 3398

Answers (2)

Suganth G
Suganth G

Reputation: 5156

Use 'affix'

Try this:

<div class="container">
    <div class="row">
        <div class="col-md-3 ">
            <div class="panel panel-default affix">
                <div class="panel-body">Fixed</div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-body">text</div>
            </div>
        </div>
    </div>
</div>

DEMO

Upvotes: 1

elzi
elzi

Reputation: 5672

Here's a few options:

1) Use Bootstrap's Affix (thanks @Christina)

2) position:sticky - with limited support

3) stickyjs - a simple js lib

4) custom bake your own solution, something like:

$(window).scroll(function (event) {

  var offset = $(this).scrollTop();

  var target = $('div').offset().top

  if ( offset > target ) {
    // do stuff
  }
})

Upvotes: 0

Related Questions