Исчезаение блока при прокрутке страницы
$(document).ready(function(){
$("#block").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#block').fadeIn();
} else {
$('#block').fadeOut();
}
});
});
});
При прокрутке 400 px страницы появляется блок. Как видоизменить код, чтобы блок исчезал при достижении футера (желательно за 200 px до конца страницы) |
В условие запили, что-нибудь подобное.
$(document).height()-window.innerHeight-$(window).scrollTop()>200 |
http://learn.javascript.ru/play/vgLobc
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style type="text/css">
body, html {
height: 2000px;
}
#block {
bottom: 20px;
display: none;
position: fixed;
right: 20px;
}
</style>
</head>
<body>
<div id="block">BLOCK</div>
<script type="text/javascript">
$(function(){
var block = $('#block'),
visible;
$(window).scroll(function() {
var a = $(this).scrollTop(),
b = a > 400 && a < $(document).height() - this.innerHeight - 200;
if(b && !visible) {
block.fadeIn(200);
visible = true;
}
else if(!b && visible) {
block.fadeOut(200);
visible = false;
}
});
});
</script>
</body>
</html>
|
Благодарю! То, что надо
|
| Часовой пояс GMT +3, время: 02:29. |