Делаю паралалакс страничку, она состоит из шести блоков. Еще есть элемент (к примеру красный квадрат 100px на 100px), который появляется и исчезает, этот квадрат обладает фиксированной позицией и должен быть поверх всех блоков, располагается в левой части экрана. Квадрат появляется в начале второго блока и должен исчезнуть в начале шестого.
Появление квадрата, это высота первого блока, плюс часть второго и все это сравниваю со scrollTop. А вот исчезновение так просто не получается. Думал про привязку к последнему блогу, но не пришел к какому-то даже пробному коду. Решил вот искать последние 600px документа.
Текущий "грязный" вариант:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
body{
height: 2000px;
}
div{
width: 100px;
height: 100px;
position: fixed;
top: 300px;
left: 50px;
}
#go{
background: red;
display: none;
}
</style>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script>
$(function(){
var $go = $('#go'),
$window = $(window);
$window.scroll(function(){
var $test3 = $(document).height() - $(window).height() - $(document).scrollTop();
console.log($test3);
if ($(document).scrollTop() > 300){
$go.show();
}
else {
$go.hide();
}
if ($test3 < 600){
console.log('YES!');
$go.hide();
}
})
});
</script>
</head>
<body>
<div id="go"></div>
</body>
</html>
можно вам поставить любой класс вместо .footer строка 32 -- этот же код можно использовать для любого блока.
