CSS。如果它覆盖页脚，如何以固定位置移动div

Question

我有菜单，内容和页脚。菜单有固定的位置。如果我将其向下滚动到页面末尾，它将覆盖页脚。如果它开始覆盖页脚，我怎么强制菜单向上移动？

修改 我使用bootstrap类。 我的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;
}

Answer 1

你应该使用bootstrap＆＃34; 词缀＆＃34;插件。

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

您可以在此处看到一个示例，说明它如何与scrollspy结合使用。 http://codepen.io/SitePoint/full/GgOzwX/（不是我的代码）

基本上你所做的就是告诉它什么时候开始和停止成为一个固定的＆＃39;元件。

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

Answer 2

更改菜单，内容和页脚以阻止。

添加css：

.clearfix::before, .clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}

并将类clearfix添加到页脚（最高层次结构）和类container。