Master-tv.net
Добро пожаловать, Гость
Логин: Пароль: Запомнить меня
Всплывающий блок при скроле страницы на Joomla

03 Март 2022 14:27 #1

Не в сети
  • joomla_cms
  • joomla_cms аватар
  • Осваиваюсь на форуме
  • Делюсь опытом
  • Сообщений: 29

Всплывающий блок при скроле страницы на Joomla

Для примера сделаем, чтобы появлялся номер телефона горячей линии при прокрутке страницы в шапке сайта.

Создадим модуль с кодом

HTML:

<div id="hotline">Номер горячей линии:</div>

Добавим стили для блока

CSS:

#hotline {
    height: 50px;
    line-height: 50px;
    margin: 0;
    padding: 5px;
    position: fixed;
    top: 0;
    display:none;
}

Далее создадим файл, например, hotline.js с кодом ниже. Поместим его в папку js нашего шаблона и пропишем путь к нему в файле index.php.

jQuery:

jQuery(function(f){
    var element = f('#hotline');
    f(window).scroll(function(){
        element['fade'+ (f(this).scrollTop() > 150 ? 'In': 'Out')](500);
    });
});

//150 - это значение высоты прокрутки до всплывающего блока

Путь к файлу hotline.js в файле index.php нужно перед тегом </head> вставить код подключения скрипта, а также, если не подключена библиотека jquery, то подключить и ее:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://мой сайт.ру/мой шаблон/js/hotline.js"></script>
Администратор запретил публиковать записи гостям.
Яндекс.Метрика