Css. How to move div with fixed position up if it overlays footer -

i have menu, content , footer. menu has fixed position. if scroll down end of page becomes overlay footer. how can force menu move if starts overlay footer?

edit: use bootstrap classes. html

<div class="container">     <div class="row">         <div class="col-sm-3" id="myscrollspy">             <ul class="nav nav-pills nav-stacked">                  <li class="active"><a href="#section1">section 1</a></li>                  <li><a href="#section2">section 2</a></li>                  <li><a href="#section3">section 3</a></li>                  ...             </ul>         </div>         <div class="col-sm-9">             <div id="section1">                     <h1>section 1</h1>                 <p>try scroll section , @ navigation list while scrolling!</p>             </div>             <div id="section2">                  <h1>section 2</h1>                 <p>try scroll section , @ navigation list while scrolling!</p>             </div>             ...     </div> </div> 

css:

ul.nav-pills {       position:fixed; } 

you should use bootstrap "affix" plugin.

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

you can see example here of how works in combination scrollspy. http://codepen.io/sitepoint/full/ggozwx/ (not code)

essentially tell when start , stop being 'fixed' element.

$('#nav').affix({     offset: {            top: $('#nav').offset().top,       bottom: ($('footer').outerheight(true) + $('.application').outerheight(true)) + 40     } });