个人中心
gpt4 book ai didi

jquery - 如何让固定的 child 和 parent 玩得开心

转载 作者：行者123 更新时间：2023-11-28 01:37:20 25 4
gpt4 key购买 nike

当 #menu 滑入/滑出时，如何让蓝色的 #block 与文档的其余部分一起动画？

默认 block 位置的菜单关闭屏幕:

Menu off screen with the default block position

屏幕上的菜单 block 不正确位置:

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

    中正确地重新对齐自身

这是一个 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/

25 4 0
文章推荐： c++ - 模板类方法中的递归 std::function 定义
文章推荐： c++ - 在多个 SDL_Renderer* 上使用 SDL_Texture*
文章推荐： c++ - 如何将 std::string 转换为大写？
文章推荐： c++ - 将值读入数组结构
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com