javascript - Fixed sidebar in bootstrap that starts at a certain position -

just in case finds question searching answer, timemachine3030 have solution problem.

the sidebar looks now:

<div class="container-fluid">   <div class="row-fluid">      <div class="span4">            <ul class="nav nav-list" data-spy="affix" data-offset-top="750">         <li><a href="#one"><i class="icon-chevron-right"></i> one</a></li>         <li><a href="#two"><i class="icon-chevron-right"></i> two</a></li>         <li><a href="#three"><i class="icon-chevron-right"></i> three</a></li>         <li><a href="#four"><i class="icon-chevron-right"></i> four</a></li>         <li><a href="#five"><i class="icon-chevron-right"></i> five</a></li>         <li><a href="#six"><i class="icon-chevron-right"></i> six</a></li>         <li><a href="#seven"><i class="icon-chevron-right"></i> seven</a></li>     </ul>      </div><!--/span--> 

we added top: 60px; .affix in bootstrap.css file plus had (shown below) have re-created "sticky" sidebar wich bootstrap uses: http://twitter.github.io/bootstrap/javascript.html#affix

timemachin3030: thank solution! hope don't mind linking profile!

---

ok using bootstrap,

perfect example of trying achieve: http://twitter.github.io/bootstrap/components.html

i have fixed sidebar navigation menu fixed meaning scrolls page.

right starts @ top of page "on-top of hero unit" scroll down page follows page.

i want start @ beginning of real content, navigation starts.

here portion of html page using bootstrap.

<div class="hero-unit">   <div class="container-fluid">     <div class="row-fluid">        <div class="span8">          <div id="mycarousel" class="carousel slide">            <!--carousel items -->            <div class="carousel-inner">              <div class="active item"><img src="img/carousel/photo1.jpg"></div>              <div class="item"><img src="img/carousel/photo2.jpg"></div>              <div class="item"><img src="img/carousel/photo3.jpg"></div>           </div>         </div>       </div>        <div class="span4">         <h2>the green panda</h2>         <p>professional web design</p>         <a href="#scrollhere" class="btn btn-primary btn-large">learn more</a>       </div>     </div>    </div> </div> <div>   <h2 align="center" id="scrollhere">professional web design</h2>   <h3 align="center">powerful. professional. affordable</h3>   <hr> </div>  <div class="container-fluid">   <div class="row-fluid">      <div class="span4">        <div class="well sidebar-nav-fixed" data-spy="affix" data-offset-top="300">         <ul class="nav nav-list">            <li class="nav-header">sidebar</li>           <li class="active"><a href="#">link</a></li>           <li><a href="#">link</a></li>           <li><a href="#">link</a></li>           <li><a href="#">link</a></li>           <li class="nav-header">sidebar</li>            <li><a href="#">link</a></li>           <li><a href="#">link</a></li>           <li><a href="#">link</a></li>           <li><a href="#">link</a></li>           <li><a href="#">link</a></li>           <li><a href="#">link</a></li>            <li class="nav-header">sidebar</li>           <li><a href="#">link</a></li>           <li><a href="#">link</a></li>           <li><a href="#">link</a></li>         </ul>       </div><!--/.well -->     </div><!--/span-->     <div class="span8">         <h3>what do</h3>        <p>here @ green panda, provide custom website development our main strong hold. web design primary reason opening green panda!</p>         <p>throughout last year have worked hard provide our clients more solutions. of our hard work has paid off, provide on line site builder , custom printed promotional products. on-top of our custom web design have provided day one.</p>        <h3>our solutions</h3>        <p>once year distribute survey our clients, bars below dictate our clients have ranked within last year on solutions offer. believe it's important future client have firm understanding of capable of.click on each bar find out more information.</p>       <strong>web design</strong> 100%       <div class="progress progress-success progress-striped active">         <div class="bar" style="width: 100%;" id="webdesign-bar" rel="popover" data-content="we proud present perfect rating in web design year 2012!" data-original-title="our main focus" data-placement="top"></div>       </div> 

to sidebar fixed added css:

.sidebar-nav-fixed {   position: fixed;   top: 60px;   width:21.97%; }  @media (max-width: 767px) {   .sidebar-nav-fixed{     width:auto;   } }  @media (max-width: 979px) {   .sidebar-nav-fixed {     position: static;     width: auto;   } } 

lucky built bootstrap. feature called 'affix' see: http://twitter.github.io/bootstrap/javascript.html#affix how use it!