Липкие блоки на jQuery by Apocalypse

Разместил: Apocalypse
Опубликовано: 31 июля 2016

Данное решение покажет вам, как любой блок на вашем сайте сделать "Липким" - прилипающим к верхней части страницы при прокрутке страницы вниз Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

.apostick { position: fixed; margin-top: 0px!important; z-index: 1; top: 0px; }

1 2 3 4 5 6

.apostick { position: fixed; margin-top: 0px!important; z-index: 1; top: 0px; }

  2#: HTML код примера:

<div class="apoparent"> <div id="aposticky">Я - липкий блок<br /><br />Прокрути страницу вниз</div> </div>

1 2 3

<div class="apoparent"> <div id="aposticky">Я - липкий блок<br /><br />Прокрути страницу вниз</div> </div>

  3#: Сразу после предыдущего кода вставьте:

<script> $(function() { var ae = $('#aposticky'); // id элемента, который нужно прилепить var ao = ae.offset(); document.onscroll = function() { if(ao.top <= $(window).scrollTop()) { ae.addClass('apostick'); } else { ae.removeClass('apostick'); }; }; }); // imapo.ru (c) 2016 </script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<script> $(function() { var ae = $('#aposticky'); // id элемента, который нужно прилепить var ao = ae.offset();   document.onscroll = function() { if(ao.top <= $(window).scrollTop()) { ae.addClass('apostick'); } else { ae.removeClass('apostick'); }; }; });   // imapo.ru (c) 2016 </script>

Автор публикации

не в сети 6 дней

Apocalypse

12

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: ApocalypsejQueryStickyБлокЛипкий

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

• Следующая публикация Частицы, летающие за курсором на HTML5 Canvas
• Предыдущая публикация Следующее, предыдущее личное сообщение by Apocalypse для uCoz

Вам может также понравиться...

• Смена стилей с запоминанием в локальном хранилище by Apocalypse

  Разместил: Apocalypse 25 июля 2016

  - Apocalypse 25 июля 2016

• Слайдер изображений «Serie3» с красивыми подсказками на jQuery

  Разместил: Apocalypse 29 июня 2015

  - Apocalypse 29 июня 2015 Last modified 26 декабря 2015

• Горный пейзаж с идущим снегом и Parallax эффектом на jQuery и HTML5 Canvas

  Разместил: Apocalypse 23 декабря 2019

  - Apocalypse 23 декабря 2019 Last modified 25 декабря 2019

Подписаться

Уведомить о

новых последующих комментариях новых ответах на мои комментарии

Label

{} [+]

Имя*

Email*

Сайт

Δ

Label

{} [+]

Имя*

Email*

Сайт

Δ

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии