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

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

添加 css :

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

并将 class clearfix 添加到您的页脚（最高层次）和 class container.

Answer 2

您应该使用 bootstrap“affix”插件。

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

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

本质上，您所做的就是告诉它何时开始和停止成为 'fixed' 元素。

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

Css。如果 div 覆盖页脚，如何将固定位置向上移动

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

css

overlay

fixed