Прокрутили до блока показали алерт))
Ребят все не могу допереть как сделать есть некий блок
<div class='do-menya'></div> и когда мы скролим до него нужно что б что то происходило ну допустим появлялся алерт $(document).scroll(function(){ }); |
Цитата:
|
Тут пошагово все расписано
http://habrahabr.ru/post/240083/ |
Спасибо почитал думаю сделаю)))
|
Ребят написал след образом но почему то не выдает нечего(((
$(document).scroll(function(){ if(parseInt($(this).scrollTop()) == parseInt($('.scroll-bot').offset().top)) { alert('Привет'); } }); т.е. при прокрутке страницы мы смотрим прокрутили сколько мы прокрутили $(this).scrollTop() и спрашиваем расстояние которое мы прокрутили и расстояние от вверха страницы до блока с классом scroll-bot одинаково или нет. и если одинаково ты мы даем алерт но я прохожу мимо блока дальше вниз и он не показывает алер. что я понял не правильно? и как это можно исправить? |
Цитата:
|
я выводил расстояние до блока он дал мне 2005. и дальше много цифр. дальше я выводил сколько я проскролил ну и он мне показывал сначала меньше этого числа далее больше. когда я делал так
if(parseInt($(this).scrollTop()) == 2005) { alert('Привет'); } то он выводил мне аллерт |
Цитата:
|
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> |
$(this).scrollTop() выводил на алертах и он выдавал числа но число 2005 не дал.
в этом загвозка? несолько раз пыьался его получить не вышло. но почему тогда, когда задаешь в условии конкретно число 2005 он принимает значение true но когда пишешь parseInt($('.scroll-bot').offset().top) (вместо конкретного числа) данного значения он не принимает. ( parseInt прописываю т.к. $('.scroll-bot').offset().top не является целым числом) Ksa в чем подвох? Если чесно не могу понять((((:help: |
Цитата:
А дело в малом. Ты просто не понимаешь что возвращает $(this).scrollTop() |
этого то я и боялся что он просто перепрыгивает число. делаю разброс
if(scrl_h+5 >= div_top && scrl_h-5 <= div_top) не походит т.к. он начинает выполнять несколько раз . а надо только один как то ведь можно обойти это но как? все что приходит на ум это только костль. что нибудь вроде если он выполнил то меняем переменную и если переменная ровная 1 то не не выполняем эту функцию |
попробывал твоим методом . записывал в скрытый инпут $(this).scrollTop() и когда value достигнет нужного числа делал вывод alert'a но он почему то все равно перескакивает время от времени ((((
|
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> |
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 |
Прости за мою тупость(( и огромное спасибо за то что тратишь на меня время.
|
Цитата:
Цитата:
http://javascript.ru/forum/dom-windo...tml#post369782 Там вроде все просто показано, как поймать первое появление. |
Да посмотрел и впринцапе там все понял но есть маленькое но. там получается подргузка контента т.е. доходим до дива подгружаем контент и див опускается вниз еще далее доходим до него подружаем контент и опускается див (в следствии подгрузки контент его отесняет в низ) второй вариант не подходит так как сработает только один раз хотя это можно исправить переменной ок присвоить true после того как контент подгрузится это понятно но есть второе но. алерт он выводит мне несколько раз я бы сказал что очень даже много раз. а значит и контент будет подгружать так же много раз а надо все один раз.
|
Trues, вот еще тебе статейку нашел... Там все по шагам расписано. С комментариями! :)
http://vk-book.ru/proverit-vidimost-...oshhyu-jquery/ |
вся загвозка в том и получается что алерт выводится много раз
|
Спасибо сейчас почитаю :)
|
Цитата:
|
Цитата:
|
:cray: в этом то вся и соль что не понимаю как мне прописать это((( все вроде легко дошли до дива вывели алерт и все радуйся. но все портит то что он перепрыгивает(((
|
учитывая что ширина и высота дива ровняется нулю. он просто получается как Якорь.
|
Цитата:
|
Понял))) большое спасибо))) я надеюсь он будет корректно его подгружать а не как с сообщением по 10 раз
|
Цитата:
|
Часовой пояс GMT +3, время: 18:42. |