Как я могу держать панель навигации наверху при прокрутке вверх по верху страницы?

Question

В браузерах, таких как Safari и Chrome для Mac, когда вы пытаетесь прокрутить вверх, когда в начале страницы, вы все еще можете немного прокрутить вверх, но с сопротивлением, и страница отскочила назад, когда вы отпустите.

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

Answer 1

Я думаю, вы хотите создать "липкий заголовок", который остается в верхней части страницы, когда вы прокручиваете страницу вниз. Вы можете сделать это с помощью CSS-правила "position" над панелью навигации:

position: fixed;
top: 0;

Примечание: возможно, это дубликат этого вопроса.

Answer 2

Попробуйте это решение, я просто угадать по вашему GIF.

1. html,body{overflow:hidden} (или же)
2. #nav{position:fixed;top:0; or margin-top : 0;} (или же)
3. $("#navbar").css("marginTop",'0')

В третьем примере вы можете попытаться сохранить значение css с помощью переменной, а затем с помощью условия if вы можете попробовать и избавиться от этого эффекта отскока.

Answer 3

Я думаю, что единственный способ - отключить эффект отказов. Эффект отказов работает на самом теге HTML, поэтому никакое абсолютное или фиксированное позиционирование не заставит его остаться. Попробуйте применить скрытое свойство к тегу html в переполнении, например так:html {overflow: hidden}