| Black_Star | 18.12.2016 00:20 |
Всё бы хорошо, но ошибки сыпятся :-?
Скролл элемента .scroll() + событие
Добрый день уважаемые. Появилась необходимость задать элементу событие при его скроллинге, а точнее когда пользователь не видет элемента прокручивая страницу. Вроди бы детский вопрос, но я где-то недопонимаю.
Приведу пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<style type="text/css">
.field{
border: 1px solid #000;
width: 800px;
height: 1800px;
}
.block{
margin: 10%;
width: 50px;
height: 50px;
background-color: red;
}
</style>
<body>
<div class="field">
<div class="block"></div>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
$("body").scroll(function() {
var coord = $('.block').offset().top;
if ($('.block').offset().top == 0) {
console.log("Елемента больше не видно в браузере");
}
else {
console.log("Елемент снова в браузере виден");
}
});
}
</script>
</html>
Почему оно не срабатывает? Мне необходимо что б при исчезновение элемента из области видимости отписывало сообщение в консоль, при появлении отписывало второе сообщение :help: |
Black_Star,
строка 37 что проверяет? |
Согласно моему пониманию $('.block').offset().top это длинна относительно начала страницы до обёкта (верхней левой точки дива)
|
Цитата:
|
...!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<style type="text/css">
.field{
border: 1px solid #000;
width: 800px;
height: 1800px;
}
.block{
margin: 10%;
width: 50px;
height: 50px;
background-color: red;
}
</style>
<body>
<div class="field">
<div class="block"></div>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
$(window).scroll(function() {
var coord = $('.block').offset().top + $('.block').height();
if (coord < $(window).scrollTop()) {
console.log("Елемента больше не видно в браузере");
}
else {
console.log("Елемент снова в браузере виден");
}
});
}
</script>
</html>
|
Спасибо, рони, ты как всегда на высоте. :thanks:
Величина то у $('.block').offset() постоянная, и не меняется в процессе скроллинга. туплю. Ещё вопрос, как данный метод модифицировать? Тут получается метод постоянно запрашивает DOM при скролленге что ни есть хорошо. Мне просто этот хак нужно внедрить в блок навигации для сайта. Есть в хедере менюшка с навигацией, когда пользователь опускается ниже этой менюшки, к ней применяется новый CSS стиль, со свойством position: fixed; и теперь данная навигация торчит у пользователя слева от экрана. Когда пользователь откручивает страницу вверх, свойство убирается |
Black_Star,
https://learn.javascript.ru/task/throttle и небольшая отимизация
window.onload = function() {
var b = true, d = $(".block"),h = d.offset().top;
$(window).scroll(function() {
var a = h < $(window).scrollTop();
a != b && ((b = a) ? d.addClass('fix'): d.removeClass('fix'))
})
};
строка 4 постоянно (смотреть ссылку выше), строка 5 работа с классом только при переходе границы |
фиксация блока при скролле
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<style type="text/css">
.field{
position: relative;
border: 1px solid #000;
width: 800px;
height: 1800px;
}
.block{
margin: 10%;
width: 50px;
height: 50px;
background-color: red;
}
.block.fix {
background-color: #006400;
position: fixed;
margin-top: -7px;
}
</style>
<body>
<div class="field">
<div class="block"></div>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var b = true, d = $(".block"),h = d.offset().top, l = d.css("margin-left");
$(window).scroll(function() {
var a = h < $(window).scrollTop();
a != b && ((b = a) ? d.addClass('fix').css({"margin-left": l}) : d.removeClass('fix').css({"margin-left":""}))
})
};
</script>
</html>
|
Спасибо рони.
Я даже нашел библиотеку этой тормозилки https://github.com/cowboy/jquery-throttle-debounce С методом throttle. Только пока что у меня ни чего не работает :write:
function scrollNav() {
$(window).scroll(function () {
var coord = $navigationTop.offset().top + $navigationTop.height();
if ($navigationSite.hasClass('navMob') && $(window).scrollTop() < coord) {
function changeNav() {
buttonNav.css({display: 'none'});
navBar.show();
$navigationSite.toggleClass('navMob');
}
$(window).scroll($.throttle(changeNav, 200));
}
else if ($(window).scrollTop() > coord) {
buttonNav.css({display: 'block'});
navBar.hide();
$navigationSite.toggleClass('navMob');
}
});
}
scrollNav();
В консоле выдает ошибку в самой библиотеке, что странно |
Black_Star,
потому что вы написали бред какой-то ... |
Black_Star,
примерно так должно быть...
$(function() {
//var $navigationTop = ... , $navigationSite и т.д.
function changeNav() {
var coord = $navigationTop.offset().top + $navigationTop.height();
if ($navigationSite.hasClass("navMob") && $(window).scrollTop() < coord) {
buttonNav.css({
display: "none"
});
navBar.show();
$navigationSite.toggleClass("navMob")
} else if ($(window).scrollTop() > coord) {
buttonNav.css({
display: "block"
});
navBar.hide();
$navigationSite.toggleClass("navMob")
}
}
$(window).scroll($.throttle(changeNav, 200))
});
|
Всё бы хорошо, но ошибки сыпятся :-?
|
| Часовой пояс GMT +3, время: 11:00. |