固定位置扩展粘性侧边栏:按下内容，怎么做？

Question

我有一个侧边栏，当它点击标题时我想要粘粘-所以我写了一个脚本，当滚动到正确的位置时给它一个固定的类，然后给它一个固定的位置。Sp到目前为止还不错--但是侧边栏有一个展开列，并且这个扩展被修正了，侧边栏在页面上下移动。

我怎样才能让它粘在一起，却仍然把内容推下去？

Answer 1

您不能使用纯css进行此操作，因为：

一个具有位置的元素: fixed；相对于viewport定位，这意味着即使页面被滚动，它也始终停留在相同的位置。上、右、下和左属性用于定位元素。 固定元素不会在其通常所在的页面上留下空白。

因此，它超出了文档的flow ，但是，您可以使用js来实现如下所需的内容：

​

$(document).ready(function () {
    $('#expander').click(function () {
        $('.content').toggleClass('nav-expanded');
    })
});

.navbar {
    position: fixed !important;
    width: 100%;
}
p {
    text-align: center;
}
.header{
    padding: 10px;
}
.content {
    padding-top: 60px;
    transition: .35s;
}
.nav-expanded {
    padding-top: 165px;  /*you can change the value to more accuracy */
}

.navbar-ex1-collapse{
    width: 100%;
}

.list-group .list-group-item{
    background: #f8f8f8 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
    <div class="header"> 
        <a href="#">Logotipo</a>

        <button id="expander" type="button" class="btn btn-success" data-toggle="collapse" data-target=".navbar-ex1-collapse">Click me</button>
    </div>
    <div class="collapse navbar-ex1-collapse">
        <ul class="list-group">
            <li class="list-group-item"><a href="#">Enlace #1</a>

                <li class="list-group-item"><a href="#">Enlace #2</a>

        </ul>
    </div>
</nav>
<div class="content">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>q</p>
    <p>w</p>
    <p>e</p>
    <p>r</p>
    <p>t</p>
    <p>y</p>
    <p>u</p>
    <p>i</p>
    <p>o</p>
    <p>p</p>
    <p>a</p>
    <p>s</p>
    <p>d</p>
    <p>f</p>
    <p>g</p>
    <p>h</p>
    <p>j</p>
    <p>k</p>
    <p>l</p>
    <p>z</p>
    <p>x</p>
</div>

​

这样做的想法是，当您在click按钮上展开标题(或任何用于该标题的东西)时，在content上设置padding-top等于您的头部展开的height。您甚至可以使用navbar计算js中的.outerheight()的高度，并将该高度设置为padding-top of .content，以提高其准确性，在代码段中使用重要信息只是因为引导程序的样式覆盖了挖掘，但通常不需要这样做。

我希望你知道这个主意，这样你就可以利用它了。