Я недавно использовал эту настройку на веб-сайте ...
http://jsfiddle.net/mnRNE/
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 пикселей, красное поле возвращается под синее поле. Это делается без таймера, поэтому переход происходит мгновенно (красная рамка возвращается на свое место).
Это прекрасно работает и делает все, что мне нужно для этого. Но мне любопытно, есть ли лучший способ для достижения этой второй анимации, вообще без использования animate и просто с красным полем «сбросить» до «margin-top: 60px» без необходимости иметь синхронизацию или .animate
По сути, я спрашиваю, может ли ...
$('#bottom-box').stop().animate({
'margin-top': '60px'
}, 0);
раздел JavaScript должен быть написан по-другому и эффективнее для достижения того же результата, но без использования анимации? Например, установить «нижний ящик» на «margin-top»: «60px»?