• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Скрипт верхняя выдвижная панель (Выдвижная боковая панель с красивым эффектом на jQuery)
Скрипт верхняя выдвижная панель
workman
 		Воскресенье, 03 Января 2016, 18:05 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Код верхняя выдвижная панель для сайта, которая подойдет под любую тематику, так как вы устанавливаете что нужно.



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 - Воскресенье, 17 Января 2016, 13:45
Страна: (RU)
Марковичь
 		Воскресенье, 03 Января 2016, 23:48 | Сообщение 2
Оффлайн
Vip
Сообщений:65
Награды: 0
« 1 »
workman, а сама панель, можно скрин, чтоб понять.
Страна: (RU)
Kosten
 		Понедельник, 04 Января 2016, 00:33 | Сообщение 3
Онлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Цитата nikolla76 ()
workman, а сама панель, можно скрин, чтоб понять.

Да ставил изображение, видать дисантура провела разведку боем и по сносила их.
Страна: (RU)
workman
 		Понедельник, 04 Января 2016, 00:45 | Сообщение 4
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Цитата Kosten ()
видать дисантура провела разведку боем и по сносила их.
biggrin biggrin biggrin Ничего я не по снасил. Это появляется при прокрутке страницы
Страна: (RU)
Сопрано
 		Понедельник, 04 Января 2016, 00:45 | Сообщение 5
Оффлайн
Vip
Сообщений:461
Награды: 4
« 14 »
workman, а вот JS нужно под дивы ставить? Просто постоянно пишут а как установить не слово.

Сообщение отредактировал
Trantel - Понедельник, 04 Января 2016, 00:45
Страна: (RU)
workman
 		Понедельник, 04 Января 2016, 00:45 | Сообщение 6
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Trantel,
Цитата Trantel ()
а вот JS нужно под дивы ставить?
Нет конечно. Зачем?
Код
Просто постоянно пишут а как установить не слово.
Да не парься. Просто все эти три кода поставь рядом с собой и наслаждайся. Только не забудь про редактировать под свой дизайн сайта.

Сообщение отредактировал
workman - Понедельник, 04 Января 2016, 00:47
Страна: (RU)
Kosten
 		Понедельник, 04 Января 2016, 00:50 | Сообщение 7
Онлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Просто ставим туда где хотите видеть.
Код

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


А остальное, думаю можно в этом блоке оставить, но если дивы ставить вверх сайта в самый низ, то это не знаю, рядом наверное, но стили точно.
Страна: (RU)
FeStemBer
 		Понедельник, 04 Января 2016, 00:54 | Сообщение 8
Оффлайн
Проверенные
Сообщений:355
Награды: 1
« 13 »
Хороший скрипт, много встречал, но что то не когда не вникал, как все сделано, но больше зависит от темы еще, какая на сайте.
Страна: (RU)
Траст
 		Понедельник, 04 Января 2016, 01:12 | Сообщение 9
Оффлайн
Пользователи
Сообщений:101
Награды: 0
« 6 »
Здесь показана панель, которая могла просто стоять при открытие сайта, но если вы мосмотрите на DEMO вы его не увидите, пока не провернете колесо в низ и тогдаоно появиться. Так вот эти скрипты это делают.

Код
<div id="workman-top">СТАВИМ ВАШУ ПАНЕЛЬ С АДРЕСАМИ ИЛИ ЧТО ВАМ ТАМ НУЖНО</div>
Быстро, дешево и сердито!
Страна: (RU)
csretven
 		Понедельник, 04 Января 2016, 01:27 | Сообщение 10
Оффлайн
Пользователи
Сообщений:54
Награды: 0
« 0 »
За такой скрипт спасибо, с меня плюс.
Страна: (RU)
Kosten
 		Понедельник, 04 Января 2016, 01:49 | Сообщение 11
Онлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Цитата csretven ()
За такой скрипт спасибо, с меня плюс.

Как знаю workman, хлам на сайт не поставляет. wink
Страна: (RU)
workman
 		Понедельник, 04 Января 2016, 13:19 | Сообщение 12
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Цитата csretven ()
За такой скрипт спасибо, с меня плюс
Спасибо за плюс в репу... smile
Страна: (RU)
Kosten
 		Понедельник, 28 Января 2019, 22:18 | Сообщение 13
Онлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Может кто попробует установить, то что то не получается вывести.
Страна: (RU)
-SAM-
 		Вторник, 29 Января 2019, 02:58 | Сообщение 14
Оффлайн
Друзья сайта
Сообщений:896
Награды: 40
« 597 »
Kosten, пробовал ставить - работает. Как и писалось в теме, что содержимое внутри того, что находиться в этом идентификаторе, то перестает быть видимым (в стилях идёт там display:none), а при прокрутке страницы - потом показывается, когда в самый верх страницы поднимаешься (это тоже регулируется в скрипте, как и скорость затухания-появления).
UPD.: понятно. Кстати, этот же скрипт и для кнопки "Вверх" используется, только там логика в другом: скрывать кнопку пока страницу на определенную высоту не прокрутишь вниз.


Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".

Сообщение отредактировал
-SAM- - Вторник, 29 Января 2019, 03:44
Страна: (UA)
Kosten
 		Вторник, 29 Января 2019, 03:36 | Сообщение 15
Онлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
-SAM-, вот в чем дело, что при прокрутки, то проверял на codepen.io, где не чего не вывело. Нужно на тестовом проверить, да возможно на главную закинуть.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Скрипт верхняя выдвижная панель (Выдвижная боковая панель с красивым эффектом на jQuery)
  • Страница 1 из 1
  • 1
Поиск: