Главная
Разное
Появление исчезновение элемента при прокрутке страницы 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>

Данный код нужно подключать после библиотеке 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;
}

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




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


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

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

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

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

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

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

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

    Добрый день!

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

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

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

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

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

  • Владислав
    Комментариев: 1

    Адблок НИКОГДА не отключу. Никогда! Ибо вы не умеете ставить рекламу. Тыкайте ею мне в ебло, как дикари.
    Рекламу нужно уметь на страницу ставить.

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

      Покажите как надо на примере своего сайта и дайте нам всем посмотреть 🙂 Если Ваше, как выговорите - е**о, страдает от 2 блоков рекламы в начале и в конце статьи, то приношу извинения. Хотя, сомневаюсь, что вы видели где реклама на моем сайте, ваша пятая точка подгорела от окошка внизу страницы 🙂

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

    Здравствуйте, а подскажите почему при загрузке страницы, если не трогать скролл, элемент #back-top отображается на экране? Если в css поставить на него display:none; то он не отображается совсем, а если display:block; то он появляется при загрузке страницы и исчезает при скроллинге.

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

      У меня тоже самое происходит с таким кодом: при загрузке страницы элемент отображается, потом при начале скроллинга сразу исчезает и потом уже работает как надо.

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

        Обновил статью, добавил пример и немного информации. Блоку нужно добавить display:none; обязательно. Блок должен быть фиксированным чтобы видеть как он появляется. Так же скрипт нужно подключать после после библиотеке jQuery

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

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

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

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

Это не спам *

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

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко