Я недавно использовал эту настройку на веб-сайте...
CSS
body {
height:2000px;
}
#top-box {
position:fixed;
width:200px;
height:200px;
margin-left:100px;
margin-top:50px;
background-color:blue;
z-index:2;
}
#bottom-box {
position:fixed;
width:200px;
height:200px;
margin-left:110px;
margin-top:60px;
background-color:red;
z-index:1;
}
JavaScript
$(document).ready(function() {
var away = false;
$(document).scroll(function() {
if ($(document).scrollTop() > 250) {
if (!away) {
away = true;
$('#bottom-box').stop().animate({
'margin-top': '200px'
}, 1500);
}
} else {
away = false;
$('#bottom-box').stop().animate({
'margin-top': '60px'
}, 0);
}
});
});
HTML
<div id="top-box"></div>
<div id="bottom-box"></div>
Это делает так, что когда пользователь прокручивает страницу на 250 пикселей вниз, красный блок анимируется и выскальзывает из-под синего блока. Эта первая анимация рассчитана так, чтобы переход был очевиден (красная рамка заметно выдвигается).
Затем он устанавливается таким образом, что если пользователь прокручивает назад более 250 пикселей, красный прямоугольник перемещается обратно под синий прямоугольник. Это делается без таймера, поэтому переход происходит мгновенно (красная рамка возвращается на исходное место).
Это отлично работает и делает все, что мне нужно. Но мне любопытно, есть ли лучший способ добиться этой второй анимации, вообще не используя анимацию и просто «сбрасывая» красное поле на «margin-top: 60px» без необходимости иметь время или .animate ?
По сути, я спрашиваю, может ли...
$('#bottom-box').stop().animate({
'margin-top': '60px'
}, 0);
раздел JavaScript должен быть написан по-другому и более эффективно для достижения того же результата, но без использования анимации? Как своего рода «установить «нижнее поле» на «верхнее поле»: «60 пикселей»?
