X
  • Дизайн и разработка сайта
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Появление исчезновение элемента при прокрутке страницы JQuery

Приклад
  • 2022-07-03
  • 36731 переглядів

    13 коментар

  • Дизайн и разработка сайта

Доброго времени суток.
Это совсем коротенькая статья, но все же с полезной штукой. Речь пойдет о скрипте который после того как вы начали прокрутку выводит на экран заданный блок, а при возврате вверх он исчезает. Данный скрипт я применил для вывода кнопки возвращения наверх. Также можно использовать для вывода какого-то рекламного блока или дополнительного меню, соцкнопок, в общем то что Вы захотите спрятать в начале, но показать при прокрутке. Момент появления и исчезновения определяется в расстоянии от верхней границы в пикселях.



Пример


В подвале перед закрывающимся body или в шапке перед закрывающимся head добавляем следующий скрипт.

Я добавляю в подвале, чтобы не засорять шапку и ускорить загрузку контента, а потом уже подгружать скрипты, плюс тот же PageSpeed от Google ругается, если в шапке присутствуют javascript

Появление блока

Вот и сам код.

<script type="text/javascript">
jQuery(function(f){
    var element = f('#back-top');
    f(window).scroll(function(){
        element['fade'+ (f(this).scrollTop() > 200 ? 'In': 'Out')](500);           
    });
});
</script>

Данный код нужно подключать после библиотеке jQuery. Выглядит строка подключения примерно так:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Если нет такого то добавьте.

В третьей строке задается id элемента который мы будем показывать. У меня это #back-top, вы можете подставить тот что Вам нужно. В пятой строке задается еще два свойства. Первое это высота от верхней границы, когда появляется блок. В данном случаи это 200 пикселей. Второе свойство это время появления или время эффекта, то есть время за которое появится элемент. В данном примере это 500 миллисекунд, то есть пол секунды, если надо дольше то меняйте. Так же блоку должно быть добавлено в стилях свойство display:none;

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

#back-top{
position:fixed;
display:none;
}

Если вы нигде не ошиблись и ничего не перепутали, то можете проверить результат. При прокрутке, в заданном месте Ваш блок появится во всей красоте 🙂
На этом все, спасибо за внимание 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 44, в среднем: 4.6 из 5
Читайте також
Опубликовано 13 комментариев

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Натисніть, щоб додати код в коментар. Далі додайте свій код всередину тегів <code> тут код </code>
Я ознайомлений(а) з політикою конфіденційності і даю згоду на обробку персональних даних*

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.