如何让固定的孩子与父母一起玩得很开心

时间:2014-12-23 13:23:02

标签: jquery html css

#block滑入/滑出时,如何让蓝色#menu使用文档的其余部分制作动画?

菜单关闭屏幕,默认阻止位置:

Menu off screen with the default block position

屏幕上的菜单错误位置

Menu on screen with the block incorrectly position

屏幕上的菜单正确位置

Menu on screen with the block correctly positioned

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

  • 中正确调整自身时

这是一个小提琴: http://jsfiddle.net/pa634x8p/1/


跟进,我通过计算#block的位置并从那里制作动画来解决这个问题。

http://jsfiddle.net/pa634x8p/3/

但是,如果有一种更简单的方法可以实现这一点,我仍然很想知道。

1 个答案:

答案 0 :(得分:1)

position:relative提供给#container,将position:absoluteleft:0提供给#block 然后,使用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();
});