javascript - 扩展粘性侧边栏固定位置 : push down content, 如何

Question

我有一个侧边栏，当它到达标题时我想要粘性 - 所以我写了一个脚本，当滚动到达正确的位置时给它一个固定的类，然后给它一个固定的位置。 Sp far so good- 但是侧边栏有一个扩展列，并且固定这会将侧边栏向下扩展到页面之外。

我怎样才能让它粘住但仍然向下推内容？

Answer 1

你不能使用纯 css 来做到这一点，因为:

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

所以它不在文档的流程中但是你可以使用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>

这个想法是，当您单击 按钮以展开标题(或您为此使用的任何内容)时，在content 上设置padding-top等于扩展后 header 的 height。您甚至可以使用 .outerheight() 计算 js 中 navbar 的高度，并将该高度设置为 .content 的 padding-top 为了使其更准确，在片段中使用 important 只是因为 Bootstrap 的样式会覆盖地雷，但通常不需要。

我希望你明白这个想法，以便你可以使用它。