Question

我正在尝试创建像this这样的侧边栏我的侧边栏重叠了页脚。当滚动到达结尾时我需要侧边栏向上移动。（完全像链接）这里是我的代码：的CSS：

 .bs-docs-sidenav {
        background-color: #FFFFFF;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        margin: 60px 0 0;
        padding: 0;
        width: 228px;
    }

    .bs-docs-sidenav > li:first-child > a {
        border-radius: 6px 6px 0 0;
    }

    .bs-docs-sidenav > li:last-child > a {
        border-radius: 0 0 6px 6px;
    }

    .bs-docs-sidenav > li > a {
        border: 1px solid #E5E5E5;
        display: block;
        margin: 0 0 -1px;
        padding: 8px 14px;
    }

    .footer {
        background-color: #F5F5F5;
        border-top: 1px solid #E5E5E5;
        margin-top: 70px;
        padding: 30px 0;
        text-align: center;
    }

    .affix-top {
        position: absolute;
        top: 0px;
        bottom: auto;
    }

    .affix-bottom {
        position: absolute;
        top:auto;
        bottom: 200px;
    }

    .affix {
        top: 0;
    }

HTML：

  <ul data-spy="affix" data-offset-top="0" data-offset-bottom="0" class="nav nav-list 
   bs-docs-sidenav affix">
    <li class="active">
        <a href="#m1">
            menu1
            <i class="icon-chevron-left"></i>
        </a>
    </li>
    <li>
        <a href="#m2">
            menu 2
            <i class="icon-chevron-left"></i>
        </a>
    </li>
   </ul>

我的代码出了什么问题？

Answer 1

我的问题答案是：我必须管理滚动以防止java脚本重叠页脚。

在Bootstrap 2.3.2中使用Affix

1 个答案: