当 #menu 滑入/滑出时，如何让蓝色的 #block 与文档的其余部分一起动画？
默认 block 位置的菜单关闭屏幕:
屏幕上的菜单 block 不正确位置:
屏幕上的菜单正确定位:
HTML
<body>
<button>Menu Toggle</button>
<div id="menu"></div>
<div id="container">
<div id="block"></div>
</div>
</body>
CSS
* {
padding: 0;
margin: 0;
}
body {
position: relative;
overflow-x: hidden;
}
button {
position: fixed;
top: 10px;
left: 10px;
height: 30px;
width: 100px;
z-index: 100;
}
#menu {
position: fixed;
top: 0;
left: -200px;
height: 100%;
width: 200px;
background: orange;
}
#container {
background: red;
margin: 0 auto;
height: 500vh;
width: 500px;
}
#block {
position: fixed;
bottom: 0;
background: blue;
height: 100px;
width: 100px;
}
JS
$('button').on('click', function() {
if ( $('#menu').hasClass('active') ) {
menuOut();
} else {
menuIn();
}
});
function menuIn() {
$('#menu').addClass('active').animate({'left':'0'});
$('body').animate({'left': '200px'});
}
function menuOut() {
$('#menu').removeClass('active').animate({'left':'-200px'});
$('body').animate({'left': '0'});
}
一些注意事项:
#block嵌套在#container中，但由于它的位置是固定的，所以不会随着body动画移动.每当调整浏览器大小时，
中正确地重新对齐自身#block都会在#container
这是一个 fiddle : http://jsfiddle.net/pa634x8p/1/
跟进，我通过计算 #block 的位置并从那里设置动画解决了这个问题。
http://jsfiddle.net/pa634x8p/3/
但是，如果有更简单的方法来实现这一点，我仍然很想知道。
最佳答案
给#container一个position:relative，给#block一个position:absolute和left:0
然后，使用 setTop() 函数计算 #block 元素的顶部位置，在文档准备好、窗口调整大小和窗口滚动时:
检查这个DEMO
$('button').on('click', function() {
if ( $('#menu').hasClass('active') ) {
menuOut();
} else {
menuIn();
}
});
function menuIn() {
$('#menu').addClass('active').animate({'left':'0'});
$('body').animate({'left': '200px'});
}
function menuOut() {
$('#menu').removeClass('active').animate({'left':'-200px'});
$('body').animate({'left': '0'});
}
var setTop = function() {
var block = $('#block');
var height = $(window).height();
var scroll = $(window).scrollTop();
var top = (parseInt(height) - 100) + parseInt(scroll);
console.log(top);
block.css({'top':top + 'px'});
}
setTop();
$(window).resize(function() {
setTop();
});
$(window).scroll(function() {
setTop();
});
关于jquery - 如何让固定的 child 和 parent 玩得开心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27621275/