Прокрутка/scroll в javascript + jquery
Прокрутка в javascript + скролл в jquery. Показать скрыть блок при прокрутке. Живые примеры и скрипты прокрутки в js и jquery!
Подробно о прокрутке в javascript + jquery
- Прокрутка в javascript
- javascript появление элемента при прокрутке
- Прокрутка в jquery
- Jquery появление элемента при прокрутке
Прокрутка в javascript
Я не буду останавливаться на теории, вы всегда сможете её изучить самостоятельно!
Вам нужен скрипт, который сможет отследить scroll/прокрутку в javascript! Этим и займемся!
Для этого нам понадобится:
Чтобы отслеживать прокрутку нам потребуется какой-то элемент, чтобы в него передавать... ну... пусть это будет позиция от верхнего края! Используем элемент div
В него добавим id
Добавим к этому блоку некие стили... не знаю вам нужны они или нет, но вот они:
<style>
div#scrolljs {
position: fixed;
left: 0px;
top: 0px;
border: 1px solid;
background: black;
color: aliceblue;
padding: 10px;
margin: 10px;
}
</style>
Описание скрипта отслеживания прокрутки в javascript
Основное предназначение данного скрипта
при прокрутке :
Запускать функцию:
Внутри которой... получаем объект с помощью getElementById
И с помощью innerHTML отправляем в наш div слово javascript с значением скрола:
Скрипт отслеживания прокрутки в javascript
<script>
window.addEventListener('scroll', function() {
document.getElementById('scrolljs').innerHTML = " javascript : " + pageYOffset + 'px';
});
</script>
Пример прокрутки в javascript
Теперь мы размещаем скрипт и div на странице...
И первый элемент div зафиксированный слева вверху это и есть иллюстрация приведенного скрипта прокрутки в javascript.
Javascript появление элемента при прокрутке
Чтобы сделать появление элемента при прокрутке в javascript нам потребуется:
Стили все возьмем из предыдущего пункта... лишь отодвинем наш третий блок от верха на 100px + добавим display none
Скрипт, который будет показывать скрывать div при прокрутке:
Для того, чтобы наш блок показывался/скрывался при прокрутке нам потребуется написать условие:
Если pageYOffset буде больше числа(например 500) ...
То отправляем в наш объект display block
Иначе Отправляем 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
Скрипт jquery для отслеживания прокрутки
Конечно же, когда вы работает с jquery вам потребуется первым делом подключить jquery
Логика скрипта в jquery по отслеживанию скрола - абсолютно аналогична предыдущему пункту со спецификой jquery
<script>
$(window).scroll(function() {
$('#scrolljquery').text("jquery : " + $(window).scrollTop() + "px");
});
</script>
Пример прокрутки в jquery
Второй блок div который стоит справа вверху в углу отображает скролл в пикселях в jquery
Jquery появление элемента при прокрутке
Часто встречаемый вопрос - "Jquery появление элемента при прокрутке".
Выше я уже привел скрипт отслеживания позиции от верха в пикселях.
Внутри напишем текст... пусть этот элемент будет появляться при соответственно численном значении(здесь число не имеет никакого значения!)
Поставим наш блок в позицию №3 опустив его ниже уже двух существующих... + сделаем его изначально невидимым 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
Появление и скрытие элемента вы видите сверху в левом верхнем углу.