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

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

转载作者：行者123 更新时间：2023-11-28 01:37:20

25

4

当 #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++ - 将值读入数组结构

scala - 玩!框架数据库脚本应用程序错误
我正在尝试创建一个数据库来处理我在 Play 中的任务!框架。这是我所拥有的: 在build.sbt中: libraryDependencies ++= Seq( jdbc, cache,
scala - 玩!错误重载方法值映射与替代方案？
在我的游戏中定义一个表单!当编译器吐出这个奇怪的错误时 Controller :重载方法值映射与替代:...[一堆废话]...Error occurred in an application invo
constraints - 玩! - 最大约束不起作用
我的应用程序有问题，@Max约束注释。我的 Controller 方法定义如下: public static void save(@Required @Max(255) String content
playframework - 玩!如何在模板标签中检索具有实体和字段名称作为参数分别传递的字段值？
我想创建一个像这样的标签: #{some_tag entity:user, field:'name'} 并期望它通过使用如下表达式生成带有用户名的输出: ${_entity._field} 我知道这行
java - 玩!删除时的框架参照完整性约束
我创建了一些 Model 对象来代表一家拥有多个客户的公司，以及一个由公司和客户组合以及多个发票行组成的发票对象。我创建了以下模型对象: @Entity public class Company ex
scala - 玩!框架或类型安全堆栈
Playframework 现在是 typesafe-stack 的一部分。那么，如果我要使用像主要语言一样的 Scala ，我现在应该下载什么？ TypsafeStack 还是 PlayFrame
jpa - 玩!框架立即保存？
在玩!如果你这样称呼: void method() { User u = User(); u.name = "bob"; u.save(); while(true){/* endless loop *
jpa - 玩!框架历史数据变化
我正在 Play 中构建一个应用程序!包含大量我想跟踪更改的数据的框架。在企业解决方案中，我可能会使用数据库触发器将更改复制到历史表中以跟踪这些更改。我不熟悉 Play!/JPA 中的类似范例，但也许
javascript - 。玩();不适用于html5音频
我一直在学习JavaScript技能，但是遇到一个问题，当单击此处是我的代码时，音频没有被播放。 Your browser does no
java - 玩!保存模型操作后的行为
我想实现在某些模型保存后在表中插入一行的行为。我当前的解决方案简而言之是:(这只是我的代码示例，因此请不要评论数据库或描述符模型的正确性)。我有一个监听器，用于在更新/插入实体上插入行为行 Desc
java - 玩! - 独特的模型领域
如何使我的模型类字段独一无二？例如。如果已经登录，我想为用户显示正确的消息。我必须自己编写验证检查并使用它，或者可以使用 JPA @UniqueConstraint？最佳答案我是这样做的: @En
hash - 玩!哈希密码返回错误结果
我使用的是 Play 1.2.1。我想对我的用户密码进行哈希处理。我认为 Crypto.passwordHash 会很好，但事实并非如此。 passwordHash 文档说它返回 MD5 密码哈希值。
java - 玩!框架强化流程
我一直在研究戏剧!框架模块并希望扩展它，添加一些功能。我发现了一个从Enhancer(play.classloading.enhancers.Enhancer)扩展的类，但不明白为什么Play!采用了
java - 玩!验证不起作用
我使用的是 Play Framework 1.2.5。我有几个与 NAme 和 Age 字段相关的验证。年龄验证无法正常工作。即使年龄大于 18 岁，我也会收到错误消息。下面是action方法中的验
java - 玩!模板语法
我使用的是 Play Framework 1.2.5。两者有什么区别: @{Application.render()} 和 @Application.render() 第一个最好用在表单 Action
java - 玩!表格总是有错误
我是新来的!我被一些总是有错误的表格所困扰。即使所有字段都已填写，我也无法弄清楚问题是什么。路线 GET /products/ controllers.Pr
java - 玩!框架保存表单中的行列表
我显示可编辑的数据库表行的列表。我想允许用户编辑显示表中的数据并同时保存所有更新。我应该如何取回 Controller 的更新列表？最佳答案由于 Play 可以绑定(bind)到 POJO，也可以
java - 玩! - 动态结束作业
那么，假设我从 Controller 异步启动一个作业，然后渲染一些模板。 MyJob job = new MyJob(); job.doJob(); render(); 我的工作看起来像: 导入 p
java - 玩!框架升级复杂性
当前使用的 Play Framework 为 2.0.4。当我尝试使用此命令升级到 2.6.21 时: addSbtPlugin("com.typesafe.play"% "sbt-plugin"%
java - 玩!框架日志记录仅适用于系统级别
我目前正在与 Play 合作!框架和看来日志记录只适用于游戏!仅但对于具有 LOGGER 初始化的类不起作用。这是 logback.xml ${application.hom

首页

博学

6Ren·AI

商城

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