Sticky kit не работает

Проблемы с position: sticky CSS и способ их решить

Дата публикации: 2019-02-26

От автора: в этой статье я хочу рассмотреть недостатки position: sticky; — в частности, как мы можем придумать креативную технику при работе с переполнениями, что вызывает разочарование при работе с нативным решением.

Липкие элементы или фиксированные панели часто используются в программах — особенно в приложениях на основе строк / столбцов, таких как Microsoft Excel. CSS position: sticky также широко используется в мобильных (нативных) приложениях и в веб-дизайне. Такие элементы помогают пользователям сохранять чувство перспективы при сортировке длинных списков или отслеживании деталей своих заказов при совершении покупок в Интернете.

Старый способ

Указать элементу, чтобы он вел себя липко и статично в окне браузера, было довольно сложно. До того, как (современные) браузеры представили нативное решение, нам приходилось прибегать к имитации поведения с помощью привязки (например, для заголовков, боковых панелей и т. д.) через javascript и position: fixed;. Javascript прослушивает события прокрутки и положение элемента в документе, и как только добавляется математика, вы вводите класс, скажем, «sticky», который назначает элементу position: fixed;, что приводит к тому, что элемент прилипание в соответствии с вашими инструкциями.

Довольно сложная техника для чего-то (что должно быть) достаточно простого. Этот метод имеет несколько (отчасти) очевидных ошибок:

элемент не расположен в потоке документа, что вызывает скачок, когда он становится в статическую позицию, и

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

потенциальное снижение производительности в результате непрерывных перерисовок и обратных вызовов из-за события прокрутки (вы могли бы справиться с проблемами производительности, используя такие методы, как дросселирование, отскок или даже Intersection Observer.

Способ sticky

Удобство этого метода заключается в том, что браузер делает всю тяжелую работу за вас. Элемент беспрепятственно участвует в потоке документа, а также фиксируется в окне, когда вы прокручиваете страницу, не вызывая внезапного скачка.

Вы можете сделать это с помощью четырех строк кода:

Источник

Sticky-Kit doesnt work on first scroll

Hi I am using http://leafo.net/sticky-kit/ plugin to stick my navbar to the top of the window when it reaches the top. It works but weirdly not on the first instance. Once I scroll back up and down again it works perfect.There is alot of code and the sticky kit code is basically telling the plugin which element to stick to his parent so I havent included any here. Has anybody else encountered this problem. I have a test domain at www.test.mrjinxy.com. I would appreciate any help.Thanks

1 Answer 1

I can’t tell which element you are calling the stick_in_parent() function on, but I had the same issue with the «sticky» element disappearing on the first scroll but then working after scrolling back up.

My issue ended up being that I needed to clearfix my parent div. The parent div had no height because it only contained floated elements. After using a clearfix on the parent div the scrolling issue went away. I used the method from this article: http://www.quirksmode.org/css/clearing.html

Here is an example of what I had to do:

Not the answer you’re looking for? Browse other questions tagged jquery sticky or ask your own question.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.15.40479

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Чем заменить position: sticky?

Ничего сложного в том, чтоб написать свою реализацию тут нет. Надо лишь понимать как складывать, умножать, делить и вычитать, чтоб посчитать позицию плавающего блока относительно контейнера.

Немного кода для размышления, jquery, но легко и на нативный перевести, ничего не изменится

в большинстве других браузеров просто не работает

Как вариант всегда есть полифилы, например вот этот.

какие есть альтернативные методы

Если есть поддержка sticky, то он не запускает механизм своей работы, а использует sticky.

Ivan Bogachev, это я не у тому, что этот так не умеет. Это я как дополнение для автора вопроса.

Надо и этот попробовать, кстати.

мне сейчас тоже пришлось найти альтернативное решение вместо position: sticky; , но у меня причина была в том, что по не вполне понятной мне причине главный wrapper-контейнер на странице имеет overflow: hidden, а при этом как известно position: sticky просто не работает. Непонятно почему, при изменении значения overflow на visible на маленьких разрешениях, мобильных, начинает плыть, размывается текст и контент съезжает в левую сторону, оставляя справа пустое пространство. Ставишь hidden — все четко и ровно.
Знаю про решение с clip-path — да только конкретно мою проблему с размытием не решает.

Остановился на простейшем нативном скрипте, в моем случае закрепляю хидер вверху страницы, когда небольшая по высоте плашка над хидером с не особо важной информацией проскролится.

думаю все понятно, дать добавленному классу для хидера fixed и все.

Источник

Плагин Sticky-Kit

Плагин Sticky-Kit обеспечивает простой способ прикрепления элементов, которые всегда отображаются при прокручивании пользователем содержимого страницы.

Источник можно найти на GitHub.

После скачивания файлов плагина Sticky-kit его необходимо подключить:
Можно подключить и полную версию без приставки .min, которая позволит в читабельном виде просматривать и редактировать исходный код.

Обязательно перед использованием необходимо подключить библиотеку jQuery.

Для использования плагина Sticky-kit необходимо вызвать stick_in_parent с элементами, которые вы хотите навсегда оставить внутри своего родителя.
Также можно указать много липких столбцов. Для этого вызовите stick_in_parent для всех элементов сразу:
Если вы не уверены, что выше: боковая панель или ваш основной контент? Неважно, просто вызовите функцию stick_in_parent для всех столбцов. Sticky-kit будет прикреплять только предметы, если они не занимают всю высоту своего родителя.

Также можно вызывать Sticky-kit с дополнительными опциями:
Рабочий пример:
Соответственно код HTML:
StickyKit очень хороший инструмент для работы с прокруткой. Одной из причин задержки прокрутки являются обработчики onscroll которые выполняют слишком много работы, запускают переполнения страниц и другие процессы. StickyKit избегает этого, имея очень легкий обработчик прокрутки, который работает с кешированными значениями.

Источник

Sticky-kit не работает в Chrome

Пожалуйста, подключитесь к этому сайту: http:/ / www.ivexone.com/app_dev. php . при перемещении полосы прокрутки верхнее меню будет исправлено в Firefox, но в chrome оно не работает.

Можете ли вы определить, в чем проблема?

1 ответ

Как заставить position: sticky работать? Я попробовал следующее В Chrome 26.0.1410.43 m, и это не работает: thead < position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 10px; >http://jsfiddle.net/8LRms / Согласно этому, он должен.

У кого-нибудь был опыт использования превосходного плагина Sticky Kit jQuery ? http://leafo.net/sticky-kit / Я не могу понять, как использовать опцию ‘offset_top’ ? Документация по опциям немного расплывчата, пример приведен ниже: $(#sticky_item).stick_in_parent(options) Наверное, я должен.

Напишите этот код css в разделе head , и это должно устранить проблему.

Похожие вопросы:

Я знаю, что это, вероятно, простой детский вопрос, но когда вы не знаете, вы не знаете 🙂 Я пытался установить плагин jquery, но я не знаю, как просто вызвать stick_in_parent на элементах, которые.

Перейти к http://charliepark.org/css-only-sticky-headers / Прокрутите вниз до тех пор, пока не появится таблица The First 40 Elements. Продолжайте прокручивать вниз до конца страницы. В Chrome 57.

Привет, я использую http://leafo.net/sticky-kit / plugin, чтобы прикрепить мою навигационную панель к верхней части окна, когда она достигнет вершины. Это работает, но, как ни странно, не в первом.

Как заставить position: sticky работать? Я попробовал следующее В Chrome 26.0.1410.43 m, и это не работает: thead < position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position.

У кого-нибудь был опыт использования превосходного плагина Sticky Kit jQuery ? http://leafo.net/sticky-kit / Я не могу понять, как использовать опцию ‘offset_top’ ? Документация по опциям немного.

Я использую sticky-kit для прокрутки контента, а затем исправляю его, как только он достигает конца содержимого одного столбца. Вот несколько примеров того, как sticky-kit отлично работает на моем.

У меня есть несколько объявлений adsense, отображаемых на тестовой странице с помощью sticky-kit v1.1.2. Когда я прокручиваю страницу вниз (я использую браузер Chrome), объявления flash /.

Я пытаюсь сделать так, чтобы некоторая информация заголовка оставалась в верхней части экрана с помощью react-sticky . Однако заголовок просто прокручивается по экрану, как на обычной странице.

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

Я использую CSS position: sticky , чтобы вставить некоторые элементы на свою страницу. Я использую

Источник