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

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

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

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

В подвале перед закрывающимся 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>

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




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(13 голосов, в среднем: 5 из 5)

Опубликовано 5 комментариев

  • Антон
    Комментариев: 1

    Благодарю, самый простой способ. Позволю себе добавить, у меня css для #back-top выглядит так:
    #back-top {
    display: none;
    position: fixed;
    bottom: 0;
    right: 20px;
    z-index: 300;
    }

  • Евгений
    Комментариев: 1

    Здравствуйте, скрипт работает, но ещё мне нужна такая функция, чтобы при скролле страницы к подвалу сайта этот блок исчезал, как такое сделать?

  • Артем
    Комментариев: 1

    Добрый день!

    Подскажите, пожалуйста, как реализовать на сайте механизм появления элемента при прокрутке экрана - элемент движется по горизонтальной оси (с права налево, или наоборот), в зависимости от прокрутки экрана вверх или вниз. Данный механизм реализован на сайте: mhmgroup.ae
    Это очень похоже на пример из статьи, но я никак не могу найти этому решение, там используется класс visibility.

    • Виталий
      Комментариев: 269

      То что Вас интересует называется CSS анимация. Вам нужно прочитать 2 статьи на моем сайте.

      Первая это http://gnatkovsky.com.ua/animaciya-elementov-stranicy-pri-prokrutke.html
      В ней показано как сделать, то что Вам нужно.

      Во второй http://gnatkovsky.com.ua/css-animaciya-elementov.html
      Разные эфекты, то есть разная анимация.

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий