javascript - Expanding Sticky sidebar with fixed position: push down content, how -

i have sidebar want sticky when hits header - wrote script gives fixed class when scroll reaches correct position, gave fixed position. sp far good- sidebar has expanding column, , being fixed expandes sidebar down , out of page.

how can make stick still push content down?

you can not using pure css because:

an element position: fixed; positioned relative viewport, means stays in same place if page scrolled. top, right, bottom, , left properties used position element.

a fixed element not leave gap in page have been located.

so out of document's flow but can use js achieve want this:

$(document).ready(function () {      $('#expander').click(function () {          $('.content').toggleclass('nav-expanded');      })  });

.navbar {      position: fixed !important;      width: 100%;  }  p {      text-align: center;  }  .header{      padding: 10px;  }  .content {      padding-top: 60px;      transition: .35s;  }  .nav-expanded {      padding-top: 165px;  /*you can change value more accuracy */  }    .navbar-ex1-collapse{      width: 100%;  }    .list-group .list-group-item{      background: #f8f8f8 !important;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  <nav class="navbar navbar-default" role="navigation">      <div class="header">           <a href="#">logotipo</a>            <button id="expander" type="button" class="btn btn-success" data-toggle="collapse" data-target=".navbar-ex1-collapse">click me</button>      </div>      <div class="collapse navbar-ex1-collapse">          <ul class="list-group">              <li class="list-group-item"><a href="#">enlace #1</a>                    <li class="list-group-item"><a href="#">enlace #2</a>            </ul>      </div>  </nav>  <div class="content">      <p>1</p>      <p>2</p>      <p>3</p>      <p>4</p>      <p>5</p>      <p>6</p>      <p>7</p>      <p>8</p>      <p>9</p>      <p>q</p>      <p>w</p>      <p>e</p>      <p>r</p>      <p>t</p>      <p>y</p>      <p>u</p>      <p>i</p>      <p>o</p>      <p>p</p>      <p>a</p>      <p>s</p>      <p>d</p>      <p>f</p>      <p>g</p>      <p>h</p>      <p>j</p>      <p>k</p>      <p>l</p>      <p>z</p>      <p>x</p>  </div>

the idea when click button expand header(or whatever use that) setting padding-top on content equal height of header expanded. can compute height of navbar in js using .outerheight() , setting height padding-top of .content make more accuracy, use of important in snippet because bootstrap's styles overwrite mines in general not needed.

i hope idea may use it.