Приклеиваем элемент страницы при её прокрутке

demosourse

Простой плагин, который "приклеит" элемент страницы в верхней части окна для того чтобы он постоянно был в зоне видимости.

Использование

Шаг 1. Подключаем библиотек

<script src="js/stickUp.min.js"></script>

Шаг 2. Применяем плагин к элементу с нужным классом. К примеру:

<script type="text/javascript">
    jQuery(function($) {
        $(document).ready( function() {
            //активируем stickUp на элементе с классом '.navbar-wrapper'
            $('.navbar-wrapper').stickUp();
        });
    });
</script>

Вот и всё!

Дополнительные возможности

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

  • Для начала необходимо создать нужные разделы. К примеру div-ы.
  • Затем каждому div-у присвоить свой id.
  • После чего применить, плагин:
<script type="text/javascript">
    jQuery(function($) {
        $(document).ready( function() {
            $('.navbar-wrapper').stickUp({
                parts: {
                    0:'home',
                    1:'features',
                    2: 'news',
                    3: 'installation',
                    4: 'one-pager',
                    5: 'extras',
                    6: 'wordpress',
                    7: 'contact'
                },
                itemClass: 'menuItem',
                itemHover: 'active'
            });
        });
    });
</script>

itemClass: класс, который будет присвоен каждому элементу навигации.

itemHover: класс, который будет присвоен активному элементу навигации.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://lirancohen.github.io/stickUp/
Перевел: Станислав Протасевич
Урок создан: 18 Ноября 2013
Просмотров: 25667
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 19 Ноября 2013 00:28
    sashkin83
    Я так понимаю это и к баннеру можно приладить?
  • 19 Ноября 2013 14:05
    rubyx
    Модно меню удерживать на месте, а кому нужно только для рекламы-баннера, простой способ вставить в нужном месте это:
    <a href="#"> (<a href="#MyFigovina">)
    или типа того :) Закрывающий не обязательно в этом плане.
  • 19 Ноября 2013 21:41
    Jounsy
    Вчера только искал информацию, как это сделать )) Вы, Станислав, как раз вовремя ) Спасибо, всё отлично работает!
  • 21 Ноября 2013 19:46
    shoxabbos
    u menya takaya problema Так вот, при добавлении записи латинскими буквами все нормально добавляестя. А если русскими символами то добавляется пустая новость. Как это понимать? Думаю во всем виновата кодировка, но у меня сайт на utf-8, БД MySql тоже на utf-8. Помогите пожалуйста.
    • 22 Ноября 2013 11:27
      Андрей Галямов
      кодировка виновата
  • 22 Ноября 2013 02:35
    Андрей Галямов
    Спасибо
  • 24 Ноября 2013 21:19
    artur_duckman
    Зачем было создавать велосипед, если уже давно существует Bootstrap Affix, который работает даже лучше?
  • 26 Ноября 2013 05:52
    roamn
    Такие вещи пишу минут за 10, в голову даже не приходило что плагины есть ;)
    • 30 Ноября 2013 20:57
      ololo_trololo_vk
      roamn, "Такие вещи" очень полезно писать новичкам(да и не только), которые занимаются разработкой фронт энда. Это своего рода отличная практика для мозга, чтобы напрячь свои извилины в попытках написать что-то "свое",а не тупо пользоваться "велосипедом". Так что вы правильно делаете)
  • 12 Марта 2014 13:06
    Nizarit
    Подобное неподребство можно сделать только стилями
    .b-bottom-panel {	position:fixed;	bottom:10;	left:10;	right:10;	z-index:999;	height:40px;	}	.b-bottom-panel__i {	height:40px;	border-top:1px solid #92969b;	background:#4e5258;	color:#fff;	background:linear-gradient(top, #4e5258 0%, #32363a 100%);	background:-o-linear-gradient(top, #4e5258 0%, #32363a 100%);	background:-moz-linear-gradient(top, #4e5258 0%, #32363a 100%);	background:-webkit-linear-gradient(top, #4e5258 0%, #32363a 100%);	background:-ms-linear-gradient(top, #4e5258 0%, #32363a 100%);	-pie-background:linear-gradient(top, #4e5258 0%, #32363a 100%);	background:-webkit-gradient(	linear,	left top,	left bottom,	color-stop(0, #4e5258),	color-stop(1, #32363a)	);	line-height:40px;	position:relative;	}
  • 22 Марта 2014 08:33
    Namikaze
    что мне дает подключение библиотеки? Там нету ведь никакого кода
  • 1 Июля 2015 13:34
    Parazitik
    подскажите плиз! донт вёрк! не могу скинуть скрипт.. многоповторяющиеся символы не пропускает..
    http://komkon-kiev.com/index.html
    просмотрите плиз
^ Наверх ^