Продолжая тему интерактивных элементов на странице сайта, хотелось бы коснуться такой вещи, как появление элемента при прокрутке (скроллинге). Не важно, что это будет за элемент, форма для подписки, рекламный баннер или кнопка вверх, в любом случае механизм появления/сокрытия будет одним и тем же. Так как же сделать появление элемента при прокрутке страницы вниз?
Для решения этой задачи мы снова воспользуемся JS библиотекой Jquery. За прокрутку (скроллинг) в Jquery отвечает событие scroll(), а так же методы .scrollTop() .scrollLeft(), благодаря которым мы можем получить или изменить вертикальную или горизонтальную прокрутку элементов. В нашем случае нам понадобится метод .scrollTop(), которым мы воспользуемся для получения значения текущей позиции прокрутки и выполнения определенных действий при достижении определенного уровня.
Для воплощения задуманного воспользуемся следующим кодом:
, т.е. мы отслеживаем окно браузера на событие прокрутки (скроллинга) ползунка, и после того, как ползунок преодолеет значение в 120 единиц по высоте, покажем элемент #top, воспользовавшись функцией fadeIn(), во всех остальных случаях данный элемент скрыт функцией fadeOut(). Теперь нам осталось задать для элемента стили, чтобы элемент был сразу невидимым на странице.
Вот так просто можно показывать/скрывать элемент при прокрутке окна браузера. Единственное, на что рекомендовал бы обратить внимание, это скорость появления/сокрытия элемента (значения указанные в функциях fadeIn() и fadeOut()). В моем понимании они уникальны для каждого дизайна и зависят от размера и цвета появляющегося элемента, поэтому прежде чем оставить подобранные мною значения рекомендовал бы с ними какое-то время поиграться, чтобы анимация на вашем сайте смотрелась более гармонично.
Нужно было сделать фиксированный элемент который при скроле страницы вниз на 250px появлялся с идентификатором hidden_block.
В интернете множество способов как это сделать, для себя отметил 2 варианта с помощью opacity и display:none.
- 2019-11-20
-
- 11
- Февраля
2015
-
Доброго времени суток.
Это совсем коротенькая статья, но все же с полезной штукой. Речь пойдет о скрипте который после того как вы начали прокрутку выводит на экран заданный блок, а при возврате вверх он исчезает. Данный скрипт я применил для вывода кнопки возвращения наверх. Также можно использовать для вывода какого-то рекламного блока или дополнительного меню, соцкнопок, в общем то что Вы захотите спрятать в начале, но показать при прокрутке. Момент появления и исчезновения определяется в расстоянии от верхней границы в пикселях.
В подвале перед закрывающимся body или в шапке перед закрывающимся head добавляем следующий скрипт.
Я добавляю в подвале, чтобы не засорять шапку и ускорить загрузку контента, а потом уже подгружать скрипты, плюс тот же PageSpeed от Google ругается, если в шапке присутствуют javascript
Данный код нужно подключать после библиотеке jQuery. Выглядит строка подключения примерно так:
Если нет такого то добавьте.
В третьей строке задается id элемента который мы будем показывать. У меня это #back-top, вы можете подставить тот что Вам нужно. В пятой строке задается еще два свойства. Первое это высота от верхней границы, когда появляется блок. В данном случаи это 200 пикселей. Второе свойство это время появления или время эффекта, то есть время за которое появится элемент. В данном примере это 500 миллисекунд, то есть пол секунды, если надо дольше то меняйте. Так же блоку должно быть добавлено в стилях свойство display:none;
Данный блок должен быть плавающим, то есть фиксированным. В примере в начале статьи, блоку добавлены следующие обязательные стили
Если вы нигде не ошиблись и ничего не перепутали, то можете проверить результат. При прокрутке, в заданном месте Ваш блок появится во всей красоте ��
На этом все, спасибо за внимание ��
Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты 🙂
