X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2019-01-17
  • 20323 просмотр

    12 комментарий

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

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



Пример


В подвале перед закрывающимся 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
Проголосовало: 29, в среднем: 4.7 из 5
Читайте также
Опубликовано 12 комментариев

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

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

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

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