Появление верхней панели при прокрутке
 | |
| Отличное решение для сайта, как появление и исчезновение элемента верхней панели при прокрутке, где исчезает когда страницу в самом верху. Только стоит страницу немного опустить просматривая материал, то панель автоматически появляется. По умолчанию она сделано по форме горизонтальной навигации. Так вам остается поставить в нее функций, это может быть меню или мини профиль, или функция, что отвечает за вашу тематику. Также вы самостоятельно в скрипте задаете формат появление, это когда страница немного покрутится в них или больше нужно, чтоб панель плавно выехала сверху. Как многие догадались, то здесь речь идет про оригинальный скрипт, где как только начали делать прокрутку вниз, то сразу после того будет выводиться на экран созданный блок, который основном идет в горизонтальном положении. Но когда производите возврат страницы, то он аналогичным способом исчезает, все происходит при возврате страницы на место. Данный материал можно применять в обширном виде, как пример уже была сказано, это навигация, также можно задействовать для вывода социальных кнопок или функций возвращение наверх. Так примерно можно его настроить по дизайн, это как светлым или темно прозрачным, здесь больше от самого стиля сайта зависит, вообщем сделать так, чтоб обязательно был замечен при его появление.  Приступаем к установке: Если не подключена библиотека, но прописываем, кроме сайтов на конструкторе uCoz, там она по умолчанию установлена. Код <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> Подключаем скрипт, а ниже прописываем код: Код <script type="text/javascript">jQuery(function(f){var element=f('#devamope-gunigaop');f(window).scroll(function(){element['fade'+(f(this).scrollTop()>100?'In':'Out')](500)})});</script> HTML Код <div id="devamope-gunigaop"> Здесь функций в горизонтальной панели </div> CSS Код #devamope-gunigaop { width: 100%; height: 95px; background-color: rgba(202, 202, 202, 0.9); display: none; position: fixed; padding-top: 5px; top: 0; right: 0; text-align: center; z-index: 300; box-shadow: 1px 4px 17px 1px #928b8b; } Большинство используют для вывода актуальной информации, как новости, но и можно поместить рекламный блок, который не будет сильно мешать пользователям и гостям сайта, но главное он обязательно будет замечен. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |