Форум

foreach · #1 (**permalink**) 15.02.2013, 17:17

Прошу прощения за тупой вопрос. Совсем запутался. Не получается отловить ситуацию когда блок при прокрутке страницы скрывается за нижней границей окна браузера. Пробовал разные варианты, что то все не то. Натолкните на мысль пожалуйста.

animhotep · #2 (**permalink**) 15.02.2013, 17:29

возьми высоту окна и сравни с позицией блока http://api.jquery.com/position/

tsigel · #3 (**permalink**) 15.02.2013, 17:29

В идеале, если прокручивается body, то:

if ($('body)[0].scrollTop + $(window).height() < $('/*селектор*/').offset().top) {
  //Ваше условие
}

(в некоторых браузерах $('body)[0] надо заменить на $('html')[0])

foreach · #4 (**permalink**) 15.02.2013, 18:26

Сообщение от animhotep

возьми высоту окна и сравни с позицией блока http://api.jquery.com/position/

Не получится.

$(window).scroll(function () {
			var spac = $(window).height();
			var pos = $('#spacer').position().top;
			$('#status').text('h='+spac+'  p='+pos);
            
        });

При разрешении экрана 1024х768
h=631
p=1500
При 1280х1024
h=887 p=1500

Я это уже второй день мучаю. Не выходит ничего.

рони · #5 (**permalink**) 15.02.2013, 19:10

foreach,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
body {
   height: 1000px
}
#spacer {
    position: relative;
    top: 500px;
	width: 300px;
	height: 100px;
    background-color: #FF0066;
	}
#status {
    position:  fixed;
    top: 0px;
	width: 300px;
	height: 30px;
    background-color:  #66FFFF;
	}
</style>
<script type="text/javascript">
$(document).ready(function (){
$(window).scroll(function () {
			var spac = $(window).height();
			var pos = Math.round($('#spacer').position().top) ;
            var scroll =  $(window).scrollTop()
            $('#status').text('h = '+spac+'  p= '+pos + ' s = '+scroll + ' show =  ' + (spac+scroll > pos));

        });
});
</script>
</head>
<body>
<div id='status'>
</div>
<div id='spacer'>
</div>
<script>
</script>
</body>
</html>

foreach · #6 (**permalink**) 15.02.2013, 19:30

Сообщение от tsigel

В идеале, если прокручивается body, то:

if ($('body)[0].scrollTop + $(window).height() < $('/*селектор*/').offset().top) {
  //Ваше условие
}

(в некоторых браузерах $('body)[0] надо заменить на $('html')[0])

Спасибо за хорошую идею. Примерно так и получилось.

document.documentElement.scrollTop + $(window).height()

Спасибо еще раз всем за советы.

foreach · #7 (**permalink**) 15.02.2013, 19:35

О_о

Рано обрадовался. В хроме почему то не работает.
В хроме не срабатывает

document.documentElement.scrollTop

Может кто то знает как его ~~об..ть~~ обойти?

рони · #8 (**permalink**) 15.02.2013, 19:42

foreach,
и в 5 посте хром неработает?

foreach · #9 (**permalink**) 15.02.2013, 19:44

Сообщение от рони

foreach,
и в 5 посте хром неработает?

Тут

$(window).scrollTop()

всегда равен 0. Во всех браузерах.

рони · #10 (**permalink**) 15.02.2013, 19:56

может ещё кто-то проверит работу скрипта? у меня он работает во всех браузерах.

Форум

Справочник

Discord чат

Курсы javascript