Я хочу, чтобы панель навигации прилипала к вершине, как только я ее прокручиваю, но она не работает, и я понятия не имею, почему. Если вы можете помочь, вот мой HTML и CSS код:
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato",sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover{
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}
<nav style="position: sticky; position: -webkit-sticky;">
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>
html
css
css-position
Harleyoc1
источник
источник
position: sticky
может перестать работать, если он находится внутри flexbox, если вы не будете осторожны, и также потерпит неудачу, если естьoverflow: hidden
илиoverflow: auto
между ним и всем, что он прокручивает внутри (корень тела или ближайший предок с переполнением: scroll)overflow: hidden
иoverflow: auto
! Я несколько днейОтветы:
Так что в вашем примере вы должны определить позицию, в которой он должен оставаться в конце, используя
top
свойство.источник
Проверьте, не установлен ли элемент-предок переполнения (например
overflow:hidden
); попробуйте переключить это. Возможно, вам придется подняться на дерево DOM выше, чем вы ожидаете =).Это может повлиять на ваш
position:sticky
элемент-потомок.источник
$(stickyElement).parents().css("overflow", "visible")
, поможет ли вызов в веб-консоли, и это помогло. Затем я нашел дальний родитель соoverflow:hidden
стилем, который вызвал проблему. Я хотел бы прочитать этот ответ более тщательноoverflow:hidden
, вы можете запустить этот скрипт в консоли браузера, чтобы проверить всех родителей / предков данного элемента: gist.github.com/brandonjp/478cf6e32d90ab9cb2cd8cbb0799c7a7У меня та же проблема, и я нашел ответ здесь .
Если ваш элемент не придерживается ожидаемого, первое, что нужно проверить, это правила, применяемые к контейнеру.
В частности, ищите любое свойство переполнения, установленное на родительском объекте. Вы не можете использовать :
overflow: hidden
,overflow: scroll
илиoverflow: auto
на родителяposition: sticky
элемента.источник
Еще несколько вещей, с которыми я столкнулся:
Когда ваш липкий элемент является компонентом (угловым и т. Д.)
Если сам «липкий» элемент является компонентом с пользовательским селектором элементов, таким как названный угловой компонент,
<app-menu-bar>
вам необходимо добавить следующее в css компонента:или
В частности, Safari для iOS требует
display:block
даже корневого элементаapp-root
углового приложения или не будет зависать.Если вы создаете компонент и определяете CSS внутри компонента (теневой DOM / инкапсулированные стили), убедитесь, что
position: sticky
он применяется к «внешнему» селектору (например,app-menu-bar
в devtools должно отображаться закрепленное положение), а не верхний уровеньdiv
внутри компонент. С Angular это может быть достигнуто с помощью:host
селектора в CSS для вашего компонента.Другой
Если элемент, следующий за вашим липким элементом, имеет сплошной фон, вы должны добавить следующее, чтобы он не скользил снизу:
Ваш липкий элемент должен быть первым (перед вашим контентом), если вы используете
top
и после него при использованииbottom
.Есть осложнения при использовании
overflow: hidden
вашего элемента-обертки - в общем, это убьет липкий элемент внутри. Лучше объяснил в этом вопросеМобильные браузеры могут отключать элементы с фиксированным или фиксированным расположением, когда отображается экранная клавиатура. Я не уверен в точных правилах (кто-нибудь когда-либо знает), но когда клавиатура видна, вы смотрите на своего рода «окно» в окно, и вы не сможете легко заставить вещи придерживаться фактическая видимая верхняя часть экрана.
Убедитесь, что у вас есть:
position: sticky;
и нет
display: sticky;
Проблемы с юзабилити
источник
display: block
иposition: relative
вызывает правильное поведение в Safari - казалось ли, чтоdisplay: block
нужно было только ? Конечно, это, вероятно, не помешает, чтобы оба указалиdisplay: block
было достаточноЭто продолжение ответов от MarsAndBack и Miftah Mizwar.
Их ответы верны. Тем не менее, трудно определить проблему предка (ей).
Чтобы сделать это очень просто, просто запустите этот скрипт jQuery в консоли браузера, и он сообщит вам значение свойства переполнения для каждого предка.
Где предок не должен
overflow: visible
менять свой CSS так, чтобы он это делал!Также, как указано в другом месте, убедитесь, что ваш липкий элемент имеет это в CSS:
источник
overflow: invisible
.(async function() { let response = await fetch('https://code.jquery.com/jquery-3.3.1.min.js'); let script = await response.text(); eval(script); })();
var p = $0.parentElement; while(p != null) { var ov = getComputedStyle(p).overflow; if(ov !== 'visible') console.warn(ov, p); else console.log(ov, p); p = p.parentElement; }
Где$0
является последним элементом , выбранным в инструментах разработчика.position: fixed
и присваивать свойства с помощью JavaScript. Вопрос не говорит о необходимости JavaScript.Мне пришлось использовать следующий CSS, чтобы заставить его работать:
Если выше не работает, то ...
Пройдите через всех предков и убедитесь, что ни один из этих элементов не имеет
overflow: hidden
. Вы должны изменить это наoverflow: visible
источник
Если вы столкнулись с этим, и ваш стикер не работает - попробуйте установить для родителя:
Работал для меня
источник
display: unset
, что не всегда может быть жизнеспособнымcontents
,initial
(?) Иinline
Забавный момент, который не был очевиден для меня: по крайней мере, в Chrome 70
position: sticky
не применяется, если вы установили его с помощью DevTools.источник
Кажется, что наклеиваемая панель не должна быть внутри какого-либо раздела или раздела с другим содержимым. Ни одно из решений не работало на меня, пока я не вынул панель навигации из div, который панель навигации разделяла с другой верхней панелью. У меня ранее были верхняя панель и панель навигации, обернутые общим div.
источник
display: unset
, это ограничение будет снято! см. stackoverflow.com/a/60560997/2902367 Также, похоже, работает сcontents
,initial
(?) иinline
из моего комментария:
Существует полифилл для использования в других браузерах, кроме FF и Chrome. Это экспериментальные правила, которые могут быть реализованы или нет в любое время через браузеры. Хром добавить его пару лет назад, а затем уронил, кажется, назад ... но как долго?
Ближайшей будет позиция: относительные + координаты обновляются при прокрутке, как только она достигнет «липкой точки», если вы хотите превратить это в скрипт javascript
источник
Я знаю, что это, кажется, уже дан ответ, но я столкнулся с конкретным случаем, и я чувствую, что большинство ответов не имеют смысла.
В
overflow:hidden
ответ покрывают 90% случаев. Это более или менее сценарий «липкой навигации».Но липкое поведение лучше всего использовать в пределах высоты контейнера. Подумайте о форме рассылки в правой колонке вашего сайта, которая прокручивается вниз по странице. Если ваш прикрепленный элемент является единственным дочерним элементом контейнера, контейнер имеет точно такой же размер, и нет места для прокрутки.
Ваш контейнер должен иметь высоту, на которую вы хотите, чтобы ваш элемент прокручивался. Который в моем сценарии «правой колонки» является высотой левой колонки. Лучший способ добиться этого - использовать
display:table-cell
столбцы. Если вы не можете, и застряли сfloat:right
таким, как я, вам придется угадать высоту левого столбца, чтобы вычислить его с помощью Javascript.источник
sticky-limit: parent
,sticky-limit: body
илиsticky-limit: nth-parent(3)
... Во всяком случае: если вы можете, вы можете снять это ограничение, установив родительский ограничитель наdisplay: unset
, как отмечено в stackoverflow.com/a/60560997/2902367 . Также, кажется, работает сcontents
,initial
(?) Иinline
Я знаю, что это старый пост. Но если есть кто-то вроде меня, который только недавно начал возиться с позицией: прилипать, это может быть полезно.
В моем случае я использовал position: sticky как элемент сетки. Это не работало, и проблема была в переполнении х: скрыто на
html
элементе. Как только я удалил это свойство, оно работало нормально. Былоbody
похоже, что наличие overflow-x: hidden на элементе работает, пока не знаю, почему.источник
два ответа здесь:
удалить
overflow
свойство изbody
тегаустановить,
height: 100%
чтобыbody
решить проблему сoverflow-y: auto
источник
Я считаю, что эта статья много говорит о том, как
sticky
работаетисточник
Реальное поведение липкого элемента:
Липко позиционируемый элемент обрабатывается как относительно позиционированный, пока его содержащий блок не пересечет указанный порог (например, установив top в значение, отличное от auto) в пределах своего корневого потока (или контейнера, в котором он прокручивается), в этот момент он рассматривается как «застрявший» "до встречи с противоположным краем содержащего его блока.
Элемент позиционируется в соответствии с обычным потоком документа, а затем смещается относительно его ближайшего предка прокрутки и содержит блок (ближайший предок уровня блока), включая элементы, связанные с таблицей, на основе значений top, right, bottom, и влево. Смещение не влияет на положение любых других элементов.
Это значение всегда создает новый контекст стека. Обратите внимание, что липкий элемент «прилипает» к своему ближайшему предку, у которого есть «механизм прокрутки» (создается, когда переполнение скрыто, прокрутка, авто или наложение), даже если этот предок не является ближайшим фактически прокручивающим предком.
Этот пример поможет вам понять:
code
https://codepen.io/darylljann/pen/PpjwPMисточник
если исправление danday74 не работает, проверьте, что родительский элемент имеет высоту.
В моем случае у меня было два ребенка, один плавающий влево и один плавающий вправо. Я хотел, чтобы правый плавающий стал липким, но мне пришлось добавить
<div style="clear: both;"></div>
в конце родительского элемента, чтобы придать ему высоту.источник
float:left
к родительскому элементу (без float его высота была 0) иposition:sticky
работал.Я использовал решение JS. Работает в Firefox и Chrome. Любые проблемы, дайте мне знать.
HTML
CSS
JS
источник
z-index
тоже очень важно. Иногда это будет работать, но вы просто не увидите этого. Попробуйте установить его на очень большое число, просто чтобы быть уверенным. Также не всегда ставьте,top: 0
но попробуйте что-нибудь повыше, если оно где-то спрятано (под панелью инструментов).источник
Вот что меня сбивало с толку ... мой липкий div был внутри другого div, так что родительскому div нужно некоторое дополнительное содержимое ПОСЛЕ липкого div, чтобы сделать родительский div "достаточно высоким", чтобы sticky div "скользил" по другому контенту как Вы прокручиваете вниз.
Так что в моем случае, сразу после липкого div, мне пришлось добавить:
(У моего приложения есть два соседних элемента div с «высоким» изображением слева и короткой формой ввода данных справа, и я хотел, чтобы форма ввода данных плавала рядом с изображением при прокрутке вниз, поэтому форма всегда на экране. Она не будет работать, пока я не добавлю вышеупомянутое «дополнительное содержимое», поэтому в «липком» диве есть что «скользить»
источник
Это правда, что
overflow
необходимо удалить или установить,initial
чтобы сделатьposition: sticky
работу над дочерним элементом. Я использовал Material Design в своем приложении Angular и обнаружил, что некоторые компоненты Material изменилиoverflow
значение. Исправление для моего сценарияисточник