Прилипание блока к верху сайта при его прокручивании
Для этого необходимо в файл скрптов или на саму страницу вставить такой скрипт
/* Прилипание меню */ <script type="text/javascript"> var objToStick = $("#objToStick"); //Получаем нужный объект var topOfObjToStick = $(objToStick).offset().top; //Получаем начальное расположение нашего блока $(window).scroll(function () { var windowScroll = $(window).scrollTop(); //Получаем величину, показывающую на сколько прокручено окно if (windowScroll > topOfObjToStick) { // Если прокрутили больше, чем расстояние до блока, то приклеиваем его $(objToStick).addClass("topWindow"); } else { $(objToStick).removeClass("topWindow"); }; }); </script>
Добавить в css стиль
.topWindow { position: fixed; top: 0; z-index:9999; /* Чтобы приклеенный элемент располагался над всеми остальными элементами страницы */ }
Также можно приклеивать блок не только к верху, но к любой стороне окна, задавая нужные css-стили.
Ещё одна хитрость. Так как блок будет располагаться поверх других, то место, которое он занимал на странице до прокрутки к этому блоку, схлопнется. На вид это будет выглядеть как резкий рывок в прокрутке на расстояние равное высоте этого блока. Это не очень красиво выглядит. Поэтому лучше заключить блок в оберточный блок и фиксировать тому высоту. Ниже показан html код для меню Yii2.
<div style="height:50px; margin-bottom: 16px;"> <!-- Горизонтальное меню --> <?php NavBar::begin([ //'brandLabel' => 'КЦ', 'renderInnerContainer' => true, 'brandUrl' => Yii::$app->homeUrl, 'options' => [ 'class' => 'navbar-defaul main-nav navbar-fixed-top', 'id' => 'objToStick', ], ]); echo Nav::widget([ 'options' => ['class' => 'nav-justified'], 'items' => [ ['label' => 'О центре', 'url' => ['/site/about']], ['label' => 'Афиша', 'url' => ['/event'], 'active' => $this->context->route == 'event/index'], ['label' => 'Кружки и студии', 'url' => ['/group'], 'active' => $this->context->route == 'group/index'], ['label' => 'Контакты', 'url' => ['/site/contact']], /*Yii::$app->user->isGuest ? ['label' => 'Login', 'url' => ['/site/login']] : ['label' => 'Logout (' . Yii::$app->user->identity->username . ')', 'url' => ['/site/logout'], 'linkOptions' => ['data-method' => 'post']],*/ ], ]); NavBar::end(); ?> <!-- /Горизонтальное меню --> </div>
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- 14 Разработка приложения на Yii. Урок 14: Выводим список категорий как новый виджет на сайте (29.04.2015)
- 13 Разработка приложения на Yii. Урок 13: Внедряем категории для статей. (29.04.2015)
- 12 Разработка приложения на Yii. Урок 12: Профилирование приложения, включаем кеширование. (20.01.2015)
- 11 Yiico. Видеокурс по разработке сайта на Yii. Урок 11: Отладка приложения, включаем журналирование. (20.01.2015)
- 10 Yiico. Видеокурс по разработке сайта на Yii. Урок 10: Если ваше приложение находится не в корневой папке, а во вложенной. (19.10.2014)
- 9 Разработка сайта на Yii с нуля. Урок 9. Выборка статей определённого автора. (13.08.2014)
- 8 Разработка сайта на Yii с нуля. Урок 8. Вызов в моделях функции, общей для них. Как избегать дублирования кода? (25.07.2014)
- 7 Разработка сайта на Yii с нуля. Урок 7. Изменение количества выводимых записей на странице в CGridView. Включаем сессии Yii. (04.09.2013)
- 6 Разработка сайта на Yii с нуля. Урок 6. Автоматич. отправка оповещений об одобренных комментариях на email автора комментария (11.08.2013)
- 5 Разработка сайта на Yii с нуля. Урок 5. Переименовываем blog в yiico. Изменяем "Home" в breadcrumbs. Включаем Gzip-сжатие. (09.08.2013)
- 4 Курс по Yii с нуля. Урок 4. Дорабатываем простую работу с пользователями: хранение пароля при редактировании пользователя. (13.04.2013)
- 3 Курс по Yii с нуля. Урок 3. Создаём новых пользователей. Организуем простую систему авторизации. Аутентификация, пароли, соли. (20.07.2014)
- 2 Yii + Git (github) на Mac. (24.03.2013)
- 2 Курс по Yii с нуля. Урок 2. Переносим и настраиваем Yii и проект нашего сайта на рабочем сервере. Избавляемся от index.php в url (09.07.2014)
- 1 Курс по Yii с нуля. Урок 1. Устанавливаем Yii на локальном компьютере. Заводим проект будущего сайта. (10.03.2013)
- 0 Composer – пакетный менеджер PHP. Что и как? (22.07.2014)
- 0 MySQL: проверить содержится ли значение в поле столбца (в столбце хранится строка значений через запятую) (22.05.2014)
- 0 Yii: Статичные страницы (создание, редактирование, удаление) (28.04.2014)
- 0 Yii: Расширение ECKEditor = Связка ckeditor + kcfinder (визуальный редактор с бесплатным файловым менеджером) (28.04.2014)
- 0 Yii: Bootstrap tabs, делаем активной вкладку на которую выполняется переход по ссылке (20.03.2014)
- 0 Yii: Доступ к атрибуту модели из файла шаблона (Вызов в шаблоне какого-либо атрибута модели). (17.02.2014)
- 0 CodeIgniter: Всплывающая форма обратной связи на Ajax в Bootstrap Modal и проверкой Captcha (18.02.2014)
- 0 Yii: Множественный автокомплит с помощью CJuiAutoComplete (автокомплит нескольких значений в одно поле) (07.02.2014)
- 0 Yii: Фотогалерея через поведение (доработка расширения imagesgallerymanager) (08.03.2016)
- 0 Opencart: Модуль Filter Product OpenCart_v1.5.x: Как скрывать недоступные опции в фильтре (23.10.2013)