CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Deutro
Deutro

Reputation: 3313

Sticky sidebar that scrolls with content

On several pages I saw a sidebar which scrolls with the content of the page. I do not really know how to describe it therefore I will show you the example pages:

Twitter Bootstrap Sidebar The sidebar on the right.

Parse Android Documentation The sidebar on the left.

Is it possible to achieve this with Twitter Bootstrap? If so are there some examples online? If it is not possible with Twitter Bootstrap are there some tutorials where I can learn how to achieve this effect?

Upvotes: 0

Views: 926

Answers (3)

Hello Universe
Hello Universe

Reputation: 3302

Do you mean something like this

http://codepen.io/hellouniverse/pen/JWGgYJ

use sticky js plugin as below

  // Make sidebar sticky
  $('.events-widget-menu').sticky({
    topSpacing: 10,
    bottomSpacing: 10,
    zIndex: 2
  });

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 76444

Bootstrap is based on css/javascript. As a result, it is possible to achieve. There are two key thoughts:

  1. Look at the css used at these sidebars, to see how are they pinned to the side:

element.style { } @media (min-width: 992px) .col-md-3 { width: 25%; } @media (min-width: 992px) .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 { float: left; } .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } user agent stylesheetdiv { display: block; } Inherited from body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; } Inherited from html { font-size: 10px; -webkit-tap-highlight-color: rgba(0,0,0,0); } html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } Pseudo ::before element :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Pseudo ::after element :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

  1. Next, you need to implement javascript/jQuery events for scrolling which will expand/collapse the elements when appropriate.

Upvotes: 0

dmaij
dmaij

Reputation: 1007

Yes, it is, it's called an affix. Have a look at

http://getbootstrap.com/javascript/#affix

Upvotes: 1

Related Questions