Я использую свой собственный код ниже, чтобы попытаться установить липкий nav.
Его работа, но всякий раз, когда он изменяет div на фиксированный, браузер автоматически прокручивается к нему. Это означает, что браузер не может прокручиваться дальше, чем в исходной навигационной панели.
Есть идеи?
$(document).ready(function() {
var stickNavOffset = $('#nav').offset().top;
function sticky() {
if ($(this).scrollTop() > stickNavOffset-1) {
$('#nav').css({position:'fixed',left:'auto'});
} else {
$('#nav').css({position:'relative',left:'auto'});
}
}
$(window).scroll(function() {
sticky();
});
});
Ваша проблема возникает, когда ваш контент является только правильной высотой, когда ваш липкий элемент установлен в position: relative
, он достаточно высок, чтобы прокручивать по вертикали, а когда он удаляется из потока документов, содержимое больше не является достаточно высоким, чтобы принудительно прокручивать.
Поэтому, когда он переключается на фиксированный, вы привязываетесь к вершине, потому что ваш документ не достаточно высок, чтобы прокручивать, что заставляет ваш липкий элемент position: relative
снова position: relative
, который возвращает полосу прокрутки.
Вы можете проверить это, просто добавив больше контента на свою страницу - если он достаточно высок, что даже без липкого элемента он все равно будет прокручиваться, у вас не будет этой проблемы.
Вы должны заметить еще одну проблему, которая заключается в том, что ваш контент немного подпрыгивает. Фактически, он прыгает точно по высоте вашего липкого элемента, который внезапно больше не существует.
Это то, что я имел в виду в своем комментарии, когда я сказал, что вам придется учитывать это пространство с вашим кодом. Раньше, когда я создавал липкие элементы, я создавал клонированный элемент-заполнитель, который я оставляю установленным для position: relative
который я оставляю на месте, чтобы высота не прыгала.
<div id="navfiller"> </div>
Перед навигацией, с отображением: нет. Когда липкая навигация установлена в положение: исправлено; Я показываю navfiller и скрываю его, когда положение установлено относительно.