Расширяющаяся липкая боковая панель с фиксированным положением: нажмите вниз, как

Question

У меня есть боковая панель Я хочу, чтобы она была липкой, когда она попадает в заголовок - поэтому я написал сценарий, который дает ему фиксированный класс, когда свиток достигает правильной позиции, а затем дал ему фиксированный должность. Sp далеко так хорошо. Но боковая панель имеет расширяющуюся колонку, и, будучи исправленной, это расширяет боковую панель вниз и из страницы.

Как я могу заставить его придерживаться, но все же нажимать содержимое вниз?

Answer 1

Вы не можете сделать это с помощью чистого CSS, потому что:

Элемент с позиции: фиксированный; позиционируется относительно окна просмотра , что означает, что он всегда остается в том же месте, даже если прокручивается страница . Для размещения элемента используются верхние, правые, нижние и левые свойства .

Фиксированный элемент не содержит пробелов на странице, где бы не был найден.

Так что из потока документа но вы можете использовать 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 кнопку для расширения заголовка (или того, что вы используете для этого) установите padding-top на content, равный height вашего заголовка. Вы даже можете вычислить высоту navbar в js, используя .outerheight() и установив эту высоту как padding-top из .content, чтобы сделать ее более точную, использование важных фрагментов - это только потому, что стили бутстрапа перезаписывают мины, но в целом это не нужно.

Надеюсь, вы поняли, что можете использовать его.