Search code examples
cssoverlayfixed

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

I have a menu, content and footer. Menu has fixed position. If I scroll it down to the end of page it becomes to overlay the footer. How can I force menu to move up if it starts to overlay the footer?

enter image description here

EDIT: I use bootstrap classes. My 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 to scroll this section and look at the navigation list while scrolling!</p>
            </div>
            <div id="section2"> 
                <h1>Section 2</h1>
                <p>Try to scroll this section and look at the navigation list while scrolling!</p>
            </div>
            ...
    </div>
</div>

Css:

ul.nav-pills {
      position:fixed;
}
Solution

  • You should use the bootstrap "affix" plugin.

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

    You can see an example here of how it works in combination with the scrollspy. http://codepen.io/SitePoint/full/GgOzwX/ (Not my code)

    Essentially what you do is tell it when to start and stop being a 'fixed' element.

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