Я видел этот вопрос несколько раз здесь, но не нашел того, у которого есть хороший ответ, поэтому я решил, что попрошу еще раз.
У меня есть боковая панель, фиксированная позиция в верхней части моего документа, которая нарушает элемент из нормального потока html.
Когда мы прокручиваемся до нижней части моего нижнего колонтитула, я бы хотел, чтобы боковая панель была сдвинута с нижним колонтитулом.
HTML
<div id="content">
<div id="sidebar">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
</div>
<div id="footer">
<p>content of unspecified height</p>
<p>content of unspecified height</p>
<p>content of unspecified height</p>
<p>content of unspecified height</p>
</div>
CSS
#content {
width: 800px;
margin: 0 auto;
position: relative;
}
#sidebar {
padding: 10px;
position: fixed;
top: 0;
}
#footer {
padding: 10px;
}
JS
...?
Я представляю, что должно произойти, когда дно "содержимого" div прокручивается на экране, тогда JS переключит положение боковой панели на абсолютное или относительно дна этого div, чтобы оно могло вернуться к нормальному потоку. но я открыт для предложений по наилучшему подходу.
Изменение: О да, и когда страница прокручивается назад, боковая панель должна вернуться к фиксированной вершине positioning- на всякий случай, если она не будет очевидна :)
Еще новичок в JS и JQuery, что является еще одной причиной того, что некоторые из существующих ответов не совсем для меня.
Спасибо за любой вклад! Дайте мне знать, если мне нужно уточнить или исправить что-либо.
Вероятно, вам нужна функция $(window).on('scroll')
которая сравнивает верхнюю часть нижнего колонтитула в нижней части окна. Псевдопользователей-код:
//Make the height of side nav shrink as we scroll past the footer
var intPos = TopOfFooter - BottomOfWindow
If (intPos < 0) {
var newHeight = $(window).height() + intPos // intPos is negative so will take away
$('#sidebar').height(newHeight);
} else {
$('#sidebar').height('100%');
}
Или что-то в этом роде...
РЕДАКТИРОВАТЬ
FYI:
var TopOfFooter = $('#footer').offset().top;
var BottomOfWindow = $(window).scrollTop() + $(window).height();