» » Скрытый и неподвижный блок на сайт

Скрытый и неподвижный блок на сайт

0 583

Неподвижный блок

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

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

Ранее, я успешно применял подобный блок у себя на сайте, а потом убрал из-за ненадобности.

Описание файлов и папок из архива
  • Все файлы загрузите на свой хостинг
  • Папка "images" - необходимые картинки для скрытого блока;
  • button.psd - шаблон фото "Помощь", который вы можете (чтобы не были у всех одинаковые) отредактировать в PhotoShop под свой дизайн и на свой вкус;
  • Папка "js" - папка со скриптом. Не забудьте подключить скрипт прописав код перед тегом </head>:
    <script type='text/javascript' src='js/jquery.min.v1.4.2.js'></script>
  • style.css - оформления неподвижного блока, подключаем его так же перед тегом </head>:
    <link rel='stylesheet' href='style.css' media='screen' />
  • code.txt - содержимое этого файла необходимо поместить в самый конец страницы перед тегом </body>
Изменения в файле code.txt
    <!-- Блок перехода к форме скрипта -->
<div class="main"><a class="title" title="Перейти к форме заказа" 
href="#sba">Перейти к форме скрипта</a></div>
     <!-- Блок телефонов -->
<div class="main"><a class="title" 
href="javascript: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="javascript:void(0);">Служба поддержки</a></div>    
<div class="collapse">
<a href="http://Ссылка_на_поддержку.html">Задать вопрос</a>

Для разнообразия, я прописал в неподвижный блок несколько различных блоков по функционалу. Вы же можете удалить не нужное, либо добавить в скрытый блок что-то своё.

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

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

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

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

Ссылка на файл: help.zip 96

Похожие новости