Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Прокрутили до блока показали алерт)) (https://javascript.ru/forum/dom-window/55621-prokrutili-do-bloka-pokazali-alert.html)

Trues 07.05.2015 10:34

Прокрутили до блока показали алерт))
 
Ребят все не могу допереть как сделать есть некий блок

<div class='do-menya'></div>

и когда мы скролим до него нужно что б что то происходило ну допустим появлялся алерт

$(document).scroll(function(){

});

ksa 07.05.2015 10:50

Цитата:

Сообщение от Trues
все не могу допереть как сделать

http://javascript.ru/forum/dom-windo...a-ehkrane.html

ksa 07.05.2015 10:55

Тут пошагово все расписано
http://habrahabr.ru/post/240083/

Trues 07.05.2015 11:56

Спасибо почитал думаю сделаю)))

Trues 07.05.2015 13:13

Ребят написал след образом но почему то не выдает нечего(((

$(document).scroll(function(){
	if(parseInt($(this).scrollTop()) == parseInt($('.scroll-bot').offset().top))
		{
		alert('Привет');
		}
});


т.е. при прокрутке страницы мы смотрим прокрутили сколько мы прокрутили $(this).scrollTop() и спрашиваем расстояние которое мы прокрутили и расстояние от вверха страницы до блока с классом scroll-bot одинаково или нет. и если одинаково ты мы даем алерт

но я прохожу мимо блока дальше вниз и он не показывает алер. что я понял не правильно? и как это можно исправить?

ksa 07.05.2015 13:16

Цитата:

Сообщение от Trues
но почему то не выдает нечего

Для начала просто посмотри/выведи что и с чем ты сравниваешь...

Trues 07.05.2015 13:20

я выводил расстояние до блока он дал мне 2005. и дальше много цифр. дальше я выводил сколько я проскролил ну и он мне показывал сначала меньше этого числа далее больше. когда я делал так

if(parseInt($(this).scrollTop()) == 2005)
			{
			alert('Привет');
			}


то он выводил мне аллерт

ksa 07.05.2015 13:29

Цитата:

Сообщение от Trues
я выводил

Т.е. ты в состоянии понять почему условие у тебя не принимает значение true?

ksa 07.05.2015 13:41

Trues, вот тебе иллюстрация происходящего...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
html,
body {
	height: 2000px;
}
#info {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 100px;
}
.scroll-bot {
	position: absolute;
	top: 1500px;
	left: 100px;
	width: 200px;
	border: 1px solid;
}
</style>
<script type='text/javascript'>
$(function(){
	$(document).scroll(function(){
		var div_top=parseInt($('.scroll-bot').offset().top);
		var scrl_h=parseInt($(this).scrollTop());
		$('#div_top').text(div_top);
		$('#scrl_h').text(scrl_h);
		if(scrl_h == div_top){
			alert('Привет');
		}
	});
});
</script>
</head>
<body>
<div id='info'>
	<p id='scrl_h'></p>
	<p id='div_top'></p>
</div>
<div class='scroll-bot'>scroll-bot</div>
</body>
</html>

Trues 07.05.2015 13:45

$(this).scrollTop() выводил на алертах и он выдавал числа но число 2005 не дал.
в этом загвозка? несолько раз пыьался его получить не вышло.
но почему тогда, когда задаешь в условии конкретно число 2005 он принимает значение true но когда пишешь parseInt($('.scroll-bot').offset().top) (вместо конкретного числа) данного значения он не принимает. ( parseInt прописываю т.к. $('.scroll-bot').offset().top не является целым числом)

Ksa в чем подвох? Если чесно не могу понять((((:help:

ksa 07.05.2015 14:18

Цитата:

Сообщение от Trues
в чем подвох?

Ты не в том ищешь проблему...
А дело в малом. Ты просто не понимаешь что возвращает
$(this).scrollTop()

Trues 07.05.2015 14:23

этого то я и боялся что он просто перепрыгивает число. делаю разброс
if(scrl_h+5 >= div_top && scrl_h-5 <= div_top)

не походит т.к. он начинает выполнять несколько раз . а надо только один как то ведь можно обойти это но как? все что приходит на ум это только костль. что нибудь вроде если он выполнил то меняем переменную и если переменная ровная 1 то не не выполняем эту функцию

Trues 07.05.2015 14:37

попробывал твоим методом . записывал в скрытый инпут $(this).scrollTop() и когда value достигнет нужного числа делал вывод alert'a но он почему то все равно перескакивает время от времени ((((

ksa 07.05.2015 14:47

Trues, у тебя явно проблемы с пониманием происходящего в браузере... :(

Еще один пример для тебя...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
html,
body {
	height: 4000px;
}
#info {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 100px;
}
.scroll-bot {
	position: absolute;
	top: 1500px;
	left: 100px;
	width: 200px;
	border: 1px solid;
}
</style>
<script type='text/javascript'>
$(function(){
	var ok=true;
	$(document).scroll(function(){
		var div_top=parseInt($('.scroll-bot').offset().top);
		var div_h=$('.scroll-bot').height();
		var scrl_top=parseInt($(this).scrollTop());
		var win_h=$('.scroll-bot').parent().parent().get(0).clientHeight;
		$('#div_top').text(div_top);
		$('#scrl_top').text(scrl_top);
		$('#win_h').text(win_h);
		if(ok&&((div_top+div_h)-scrl_top)<win_h){
			alert('Привет');
			ok=false;
		}
	});
});
</script>
</head>
<body>
<div id='info'>
	<p id='scrl_top'></p>
	<p id='win_h'></p>
	<p id='div_top'></p>
</div>
<div class='scroll-bot'>scroll-bot</div>
</body>
</html>

Trues 07.05.2015 15:11

ksa я посмотрел что выдает parseInt($(this).scrollTop()) записал все цифры которые он мне выдает и увидел что он отсылает не каждое число от и до т.е. в момент когда мы прокрутили я думал он даст все числа например от 200 до 400 но он перескакивает и чем быстрее крутанешь тем больше чисел он перескакивает. но как мне выйти из ситуации я та и не понял

цифры которые он мне выдал


, 2199 , 2200 , 2203 , 2207 , 2211 , 2217 , 2223 , 2229 , 2236 , 2243 , 2250 , 2256 , 2263 , 2270 , 2275 , 2282 , 2287 , 2292 , 2296 , 2300 , 2303 , 2306 , 2307 , 2309 , 2310 , 2312 , 2316 , 2321 , 2327 , 2332 , 2339 , 2346 , 2352 , 2360 , 2366 , 2372 , 2379 , 2385 , 2391 , 2396 , 2402 , 2405 , 2410 , 2413 , 2416 , 2417 , 2419 , 2418 , 2416 , 2407 , 2400 , 2393 , 2370 , 2339 , 2303 , 2267 , 2233 , 2199 , 2168 , 2142 , 2120 , 2104 , 2093 , 2089 , 2090 , 2091 , 2097 , 2118 , 2156 , 2202 , 2255 , 2308 , 2356 , 2404 , 2448 , 2485 , 2523 , 2555 , 2582 , 2606 , 2624 , 2635 , 2639

Trues 07.05.2015 15:12

Прости за мою тупость(( и огромное спасибо за то что тратишь на меня время.

ksa 07.05.2015 15:42

Цитата:

Сообщение от Trues
я думал он даст все числа например от 200 до 400 но он перескакивает и чем быстрее крутанешь тем больше чисел он перескакивает

Да, скрол так и работает. :yes:
Цитата:

Сообщение от Trues
но как мне выйти из ситуации я та и не понял

А пример мой смотрел?
http://javascript.ru/forum/dom-windo...tml#post369782

Там вроде все просто показано, как поймать первое появление.

Trues 07.05.2015 16:08

Да посмотрел и впринцапе там все понял но есть маленькое но. там получается подргузка контента т.е. доходим до дива подгружаем контент и див опускается вниз еще далее доходим до него подружаем контент и опускается див (в следствии подгрузки контент его отесняет в низ) второй вариант не подходит так как сработает только один раз хотя это можно исправить переменной ок присвоить true после того как контент подгрузится это понятно но есть второе но. алерт он выводит мне несколько раз я бы сказал что очень даже много раз. а значит и контент будет подгружать так же много раз а надо все один раз.

ksa 07.05.2015 16:08

Trues, вот еще тебе статейку нашел... Там все по шагам расписано. С комментариями! :)
http://vk-book.ru/proverit-vidimost-...oshhyu-jquery/

Trues 07.05.2015 16:08

вся загвозка в том и получается что алерт выводится много раз

Trues 07.05.2015 16:09

Спасибо сейчас почитаю :)

ksa 07.05.2015 16:10

Цитата:

Сообщение от Trues
второй вариант не подходит так как сработает только один раз хотя это можно исправить переменной ок присвоить true после того как контент подгрузится это понятно но есть второе но. алерт он выводит мне несколько раз я бы сказал что очень даже много раз. а значит и контент будет подгружать так же много раз а надо все один раз.

Ну тут уже сам решай сколько раз тебе чего показывать и сколько чего еще тебе грузить... :)

ksa 07.05.2015 16:10

Цитата:

Сообщение от Trues
вся загвозка в том и получается что алерт выводится много раз

А ты выводи только когда тебе это нужно. Вроде все просто... :)

Trues 07.05.2015 16:27

:cray: в этом то вся и соль что не понимаю как мне прописать это((( все вроде легко дошли до дива вывели алерт и все радуйся. но все портит то что он перепрыгивает(((

Trues 07.05.2015 16:29

учитывая что ширина и высота дива ровняется нулю. он просто получается как Якорь.

ksa 07.05.2015 16:50

Цитата:

Сообщение от Trues
все вроде легко дошли до дива вывели алерт и все радуйся. но все портит то что он перепрыгивает

Так ты не выводи сообщение пока есть, что подгружать... А когда грузить уже нечего - выведешь то сообщение. ;)

Trues 07.05.2015 16:58

Понял))) большое спасибо))) я надеюсь он будет корректно его подгружать а не как с сообщением по 10 раз

ksa 08.05.2015 08:10

Цитата:

Сообщение от Trues
я надеюсь он будет корректно его подгружать

Жизнь покажет...


Часовой пояс GMT +3, время: 18:42.