Чистый CSS для достижения эффекта потолка

эффект потолка, как следует из названия, автоматически фиксируется вверху, когда элемент находится близко к верху.


Общие сценарии:
Панель навигации
алфавитный список

Для достижения эффекта навигационного потолка мы обычно используем мониторингscroll, затем установитеposition: fixedдля достижения эффекта закрепления на вершине. В интернете есть много способов реализации такого эффекта навигационного потолка, сегодня я точно не буду представлять его еще раз, а представлю еще один более простой способ реализации.

Прежде чем представить реальный метод реализации, давайте посмотримposition, сколько у него значений атрибутов?

Вы можете подумать, не задумываясь:

{
  position: static;
  position: relative;
  position: absolute;
  position: fixed;
}

Вышеупомянутые значения обычно используются, конечно, есть и менее используемые значения:

{
  position: inherit;
  position: initial;
  position: unset;
}

Какое это имеет отношение к реализации эффекта навигационного потолка? Извините, это не имеет значения, важно другое значение свойства:position: sticky;

Какова функция значения этого атрибута?

Липкое позиционирование — это сочетание относительного позиционирования и фиксированного позиционирования. Элементы располагаются относительно друг друга до тех пор, пока не преодолеют определенный порог, после чего фиксируются.. (источник:position)

Уведомление:position: stickyеще одинэкспериментальныйстоимость имущества.

Глядя на текст, может быть трудно понять какое-то время, давайте начнем с примера:
<iframe src="undefined" style="width:undefinedpx;height:undefinedpx;border:1px solid #d9d9d9">

В приведенном выше примере мы установили все три элемента div.position: sticky, но из-заtopРазличные значения имеют разные эффекты.

• Та же точка:

box1, box2, box3 перед прокруткой, они совпадают с относительным позиционированием
Достижение определенной позиции означает то же, что и абсолютное позиционирование.

• разница:

коробка1topзначение0, фиксируется в верхней части области просмотра страницы, когда она находится рядом с верхней частью области просмотра страницы.
когда коробка2topзначение30px, в 30px от окна просмотра страницы, это фиксировано
box3 не установленtop, его поведение всегда было относительным позиционированием

Я верю, что из приведенного выше примера вы поняли».Липкое позиционирование — это сочетание относительного и фиксированного позиционирования. Элементы располагаются относительно друг друга до тех пор, пока не преодолеют определенный порог, после чего фиксируются.«Смысл этого отрывка — междоменный порог, указанный выше.topзначение, конечно, тоже работаетright、left、bottomстоимость.

Уведомление:

• липкое позиционированиефиксированное позиционирование не обязательноposition:fixed, только любой родитель целевого элемента не установленposition:relative | absolute | fixed | stickyНа случай, еслиposition: fixedвести себя так же. и когда любой из его родительских элементов установленposition:relative | absolute | fixed | stickyКогда целевой элемент фиксируется относительно родительского элемента.

Не волнуйтесь пока так, мы все еще не можем избежать проблемы:совместимость
<iframe src="undefined" style="width:undefinedpx;height:undefinedpx;border:1px solid #d9d9d9"><iframe src="undefined" style="width:undefinedpx;height:undefinedpx;border:1px solid #d9d9d9">

Если у вас есть какие-либо вопросы или проблемы, пожалуйста, оставьте сообщение в разделе комментариев ниже!