Twitter Bootstrap Question posted in

Twitter bootstrap – 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?

Tags:

3

Answers


  1. 0

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

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

    Login or Signup to reply.
  2. 0

    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.
    Login or Signup to reply.
  3. 0

    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
  });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search