• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Скрипт верхняя выдвижная панель (Выдвижная боковая панель с красивым эффектом на jQuery)
Скрипт верхняя выдвижная панель
workman
Дата: Воскресенье, 2016-01-03, 18:05 | Сообщение 1
Проверенные
Сообщений:1717
Награды: 9


Код верхняя выдвижная панель для сайта, которая подойдет под любую тематику, так как вы устанавливаете что нужно.



JS
Код
<script type="text/javascript">jQuery(function(f){var element=f('#workman-top');f(window).scroll(function(){element['fade'+(f(this).scrollTop()>100?'In':'Out')](500)})});</script><style>#workman-top{width:100%;height:62px;background-color:rgba(255,255,255,0.9);display:none;position:fixed;padding-top:5px;top:0;right:0;text-align:center;z-index:300;box-shadow:0 3px 7px 0 #C0C0C0}</style>

Вот сюда вставляем то что нужно было видеть сверху. Например можно вставить вашу менюшку
Код
<div id="workman-top">....</div>
Стили CSS редактируем под себя как понравится.
Как работает можно посмотреть при прокрутке страницы.
Если кого не устраивает цвет панели, то спрашивайте в ЛС.
Прикрепления: 1682631.png(237.5 Kb)


Сообщение отредактировал
workman - Воскресенье, 2016-01-17, 13:45
Страна: (RU)
Марковичь
Дата: Воскресенье, 2016-01-03, 23:48 | Сообщение 2
Проверенные
Сообщений:65
Награды: 0


workman, а сама панель, можно скрин, чтоб понять.
Страна: (RU)
Kosten
Дата: Понедельник, 2016-01-04, 00:33 | Сообщение 3
Администраторы
Сообщений:20310
Награды: 56


Цитата nikolla76 ()
workman, а сама панель, можно скрин, чтоб понять.

Да ставил изображение, видать дисантура провела разведку боем и по сносила их.
Страна: (RU)
workman
Дата: Понедельник, 2016-01-04, 00:45 | Сообщение 4
Проверенные
Сообщений:1717
Награды: 9


Цитата Kosten ()
видать дисантура провела разведку боем и по сносила их.
biggrin biggrin biggrin Ничего я не по снасил. Это появляется при прокрутке страницы
Страна: (RU)
Сопрано
Дата: Понедельник, 2016-01-04, 00:45 | Сообщение 5
Пользователи
Сообщений:414
Награды: 2


workman, а вот JS нужно под дивы ставить? Просто постоянно пишут а как установить не слово.

Сообщение отредактировал
Trantel - Понедельник, 2016-01-04, 00:45
Страна: (RU)
workman
Дата: Понедельник, 2016-01-04, 00:45 | Сообщение 6
Проверенные
Сообщений:1717
Награды: 9


Trantel,
Цитата Trantel ()
а вот JS нужно под дивы ставить?
Нет конечно. Зачем?
Код
Просто постоянно пишут а как установить не слово.
Да не парься. Просто все эти три кода поставь рядом с собой и наслаждайся. Только не забудь про редактировать под свой дизайн сайта.


Сообщение отредактировал
workman - Понедельник, 2016-01-04, 00:47
Страна: (RU)
Kosten
Дата: Понедельник, 2016-01-04, 00:50 | Сообщение 7
Администраторы
Сообщений:20310
Награды: 56


Просто ставим туда где хотите видеть.
Код

<div id="workman-top">....</div>


А остальное, думаю можно в этом блоке оставить, но если дивы ставить вверх сайта в самый низ, то это не знаю, рядом наверное, но стили точно.
Страна: (RU)
FeStemBer
Дата: Понедельник, 2016-01-04, 00:54 | Сообщение 8
Проверенные
Сообщений:349
Награды: 1


Хороший скрипт, много встречал, но что то не когда не вникал, как все сделано, но больше зависит от темы еще, какая на сайте.
Страна: (RU)
Траст
Дата: Понедельник, 2016-01-04, 01:12 | Сообщение 9
Пользователи
Сообщений:101
Награды: 0


Здесь показана панель, которая могла просто стоять при открытие сайта, но если вы мосмотрите на DEMO вы его не увидите, пока не провернете колесо в низ и тогдаоно появиться. Так вот эти скрипты это делают.

Код
<div id="workman-top">СТАВИМ ВАШУ ПАНЕЛЬ С АДРЕСАМИ ИЛИ ЧТО ВАМ ТАМ НУЖНО</div>


Быстро, дешево и сердито!
Страна: (RU)
csretven
Дата: Понедельник, 2016-01-04, 01:27 | Сообщение 10
Пользователи
Сообщений:54
Награды: 0


За такой скрипт спасибо, с меня плюс.
Страна: (RU)
Kosten
Дата: Понедельник, 2016-01-04, 01:49 | Сообщение 11
Администраторы
Сообщений:20310
Награды: 56


Цитата csretven ()
За такой скрипт спасибо, с меня плюс.

Как знаю workman, хлам на сайт не поставляет. wink
Страна: (RU)
workman
Дата: Понедельник, 2016-01-04, 13:19 | Сообщение 12
Проверенные
Сообщений:1717
Награды: 9


Цитата csretven ()
За такой скрипт спасибо, с меня плюс
Спасибо за плюс в репу... smile
Страна: (RU)
Kosten
Дата: Понедельник, 2019-01-28, 22:18 | Сообщение 13
Администраторы
Сообщений:20310
Награды: 56


Может кто попробует установить, то что то не получается вывести.
Страна: (RU)
-SAM-
Дата: Вторник, 2019-01-29, 02:58 | Сообщение 14
Друзья сайта
Сообщений:486
Награды: 18


Kosten, пробовал ставить - работает. Как и писалось в теме, что содержимое внутри того, что находиться в этом идентификаторе, то перестает быть видимым (в стилях идёт там display:none), а при прокрутке страницы - потом показывается, когда в самый верх страницы поднимаешься (это тоже регулируется в скрипте, как и скорость затухания-появления).

UPD.: понятно. Кстати, этот же скрипт и для кнопки "Вверх" используется, только там логика в другом: скрывать кнопку пока страницу на определенную высоту не прокрутишь вниз.




Сообщение отредактировал
-SAM- - Вторник, 2019-01-29, 03:44
Страна: (UA)
Kosten
Дата: Вторник, 2019-01-29, 03:36 | Сообщение 15
Администраторы
Сообщений:20310
Награды: 56


-SAM-, вот в чем дело, что при прокрутки, то проверял на codepen.io, где не чего не вывело. Нужно на тестовом проверить, да возможно на главную закинуть.
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Скрипт верхняя выдвижная панель (Выдвижная боковая панель с красивым эффектом на jQuery)
  • Страница 1 из 1
  • 1
Поиск: