Прокрутка/scroll в javascript + jquery

Прокрутка в javascript + скролл в jquery. Показать скрыть блок при прокрутке. Живые примеры и скрипты прокрутки в js и jquery!

Подробно о прокрутке в javascript + jquery

1. Прокрутка в javascript
2. javascript появление элемента при прокрутке
3. Прокрутка в jquery
4. Jquery появление элемента при прокрутке

Прокрутка в javascript

Я не буду останавливаться на теории, вы всегда сможете её изучить самостоятельно!

Вам нужен скрипт, который сможет отследить scroll/прокрутку в javascript! Этим и займемся!

Для этого нам понадобится:

Чтобы отслеживать прокрутку нам потребуется какой-то элемент, чтобы в него передавать... ну... пусть это будет позиция от верхнего края! Используем элемент div

В него добавим id

<div id=scrolljs>div</div>

Добавим к этому блоку некие стили... не знаю вам нужны они или нет, но вот они:

<style>

div#scrolljs {

  position: fixed;

  left: 0px;

  top: 0px;

  border: 1px solid;

  background: black;

  color: aliceblue;

  padding: 10px;

  margin: 10px;

}

</style>

Описание скрипта отслеживания прокрутки в javascript

Основное предназначение данного скрипта

при прокрутке :

window.addEventListener('scroll'

Запускать функцию:

function() {

Внутри которой... получаем объект с помощью getElementById

document.getElementById('scrolljs')

И с помощью innerHTML отправляем в наш div слово javascript с значением скрола:

" javascript : " + pageYOffset + 'px';

Скрипт отслеживания прокрутки в javascript

<script>

window.addEventListener('scroll', function() {

document.getElementById('scrolljs').innerHTML = " javascript : " + pageYOffset + 'px';

});

</script>

Пример прокрутки в javascript

Теперь мы размещаем скрипт и div на странице...

И первый элемент div зафиксированный слева вверху это и есть иллюстрация приведенного скрипта прокрутки в javascript.




Javascript появление элемента при прокрутке

Чтобы сделать появление элемента при прокрутке в javascript нам потребуется:

Опять div + id

<div id=showdivbyscrolljs>javascript scroll > 500px</div>

Стили все возьмем из предыдущего пункта... лишь отодвинем наш третий блок от верха на 100px + добавим display none

Стили:

div#showdivbyscrolljs{top: 100px; display:none}

Скрипт, который будет показывать скрывать div при прокрутке:

Для того, чтобы наш блок показывался/скрывался при прокрутке нам потребуется написать условие:

Если pageYOffset буде больше числа(например 500) ...

if(pageYOffset > 500)

То отправляем в наш объект display block

document.getElementById('showdivbyscrolljs').style.display = "block";

Иначе Отправляем display none

document.getElementById('showdivbyscrolljs').style.display = "none";

Код javascript появление скрытие div при прокрутке

<script>
window.addEventListener('scroll', function() {
if(pageYOffset > 500) document.getElementById('showdivbyscrolljs').style.display = "block";
else document.getElementById('showdivbyscrolljs').style.display = "none";
});
</script>




Прокрутка в jquery

Для того, чтобы отследить прокрутку в jquery нам потребуется:

Опять div

Опять id

<div id=scrolljquery>div</div>

Стили не привожу... единственное, что я сделал чуть отодвинул от первого div

div#scrolljquery{top: 50px;}

Скрипт jquery для отслеживания прокрутки

Конечно же, когда вы работает с jquery вам потребуется первым делом подключить jquery

Логика скрипта в jquery по отслеживанию скрола - абсолютно аналогична предыдущему пункту со спецификой jquery

<script>
$(window).scroll(function() {
  $('#scrolljquery').text("jquery : " + $(window).scrollTop() + "px");
});
</script>

Пример прокрутки в jquery

Второй блок div который стоит справа вверху в углу отображает скролл в пикселях в jquery




Jquery появление элемента при прокрутке

Часто встречаемый вопрос - "Jquery появление элемента при прокрутке".

Выше я уже привел скрипт отслеживания позиции от верха в пикселях.

Опять div + Опять id

Внутри напишем текст... пусть этот элемент будет появляться при соответственно численном значении(здесь число не имеет никакого значения!)

<div id=showdivbyscroll>scroll > 800px</div>

Стили css :

Поставим наш блок в позицию №3 опустив его ниже уже двух существующих... + сделаем его изначально невидимым display none. (Основные стили в первом пункте) лишь добавим:

div#showdivbyscroll{top: 150px; display:none}

Возьмем тот же скрипт, что использовали выше, но внутри напишем условие...

Если числовое значение более того, что мы определили(800), то блок с "id=showdivbyscroll" будет показываться.

Иначе скрываться(display none)

<script>

$(window).scroll(function() {

if($(window).scrollTop() > 800)$('#showdivbyscroll').css("display","block");

else $('#showdivbyscroll').css("display","none");

});

</script>

Пример : появление и скрытие элемента jquery

Появление и скрытие элемента вы видите сверху в левом верхнем углу.