Содержание страницы
домикГлавная / Скрипты java и php / Скрытый и неподвижный блок на сайт
Неподвижный блокРаботу скрипта скрытого и неподвижного блока вы могли часто наблюдать на различных сайтах, - это зафиксированный элемент справа, слева, снизу или в самом верху в виде кнопки, картинки, соц. сетей и так далее, который остаётся неподвижным при прокрутке страницы.

Данный ява скрипт применяется для удобного вывода неподвижного блока, он не занимает много места и всегда находится наведу у посетителя. Особенно удобно, когда ваша страница имеет очень большой объём содержания, например: как у продающих страниц, где информации настолько много, что посетителю довольно тяжело отыскать нужный ему раздел ( контакты, стоимость, ответы на вопросы и т.д. ).

Описание файлов и папок из архива

  • Все файлы загрузите на свой хостинг
  • Папка "images" - необходимые картинки для скрытого блока;
  • button.psd - шаблон фото "Помощь", который вы можете (чтобы не были у всех одинаковые) отредактировать в PhotoShop под свой дизайн и на свой вкус;
  • файл "js" - файл скрипта. Не забудьте подключить скрипт прописав код перед тегом </head>:
    <script type='text/jаvascript' src='jquery.min.v1.4.2.js'></script>
  • style.css - оформления неподвижного блока, подключаем его так же перед тегом </head>:
    <link rel='stylesheet' href='style.css' media='screen' />
  • code.txt - содержимое этого файла необходимо поместить в самый конец страницы перед тегом </body>

Изменения в файле code.txt

htmlCOPY
<!-- Блок перехода к форме скрипта --> <div class="main"><a class="title" title="Перейти к форме заказа" href="#sba">Перейти к форме скрипта</a></div> <!-- Блок телефонов --> <div class="main"><a class="title" href="jаvascript:void(0);">Контакты</a></div> <div class="collapse"> <strong>(Тел): 8-495-000-0-000</strong><br /> ПН-ПТ с 9:00 до 22:00,<br /> СБ с 10:00 до 20:00,<br /> ВС - выходной,<br /> время указано московское. </div> <!-- Блок службы поддержки --> <div class="main"><a class="title" href="jаvascript:void(0);">Служба поддержки</a></div> <div class="collapse"> <a href="http://Ссылка_на_поддержку.html">Задать вопрос</a>
Для разнообразия, я прописал в неподвижный блок несколько различных блоков по функционалу. Вы же можете удалить не нужное, либо добавить в скрытый блок что-то своё.

Подробнее о моих прописанных блоках

В 1-ом блоке я сделал якорную ссылку - и это может быть любая ссылка, например, на ваш заказ (условно).

Во 2-ом блоке я разместил контакты, а в 3-ий блок был помещён скрипт "Поддержка Онлайн".

стрелка вниз Скачать скрипт неподвижного и скрытого блока

Ссылка на файл: скачать архив
Дата публикации: 13.08.2018
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!