Question

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

我怎样才能让它坚持下去但仍会推迟内容？

Answer 1

你不能使用纯css，因为：

位置：固定的元素;是相对于   视口，这意味着它总是停留在同一个地方，即使它   页面滚动。使用了top，right，bottom和left属性   定位元素。

固定元素不会在页面中留下空隙   通常已被找到。

所以它不在文档的流程但是你可以用js来实现你想要的东西：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

这个想法是当你click按钮展开标题（或者你用的那个）时padding-top上的content设置等于标题的height扩大。您甚至可以使用navbar计算js中.outerheight()的高度，并将该高度设置为padding-top的{{1}}，以使其更准确，仅在代码段中使用重要内容因为bootstrap的样式会覆盖地雷，但一般情况下不需要。

我希望你能得到这个想法，以便你可以使用它。

扩展固定位置的粘滞侧边栏：按下内容，如何

1 个答案: