gpt4 book ai didi

jquery - body中使用固定位置元素时,如何将网站内容向下推,在上面插入内容

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

我正在尝试在网站内容上方添加下拉内容 block 。下拉 block 应该将所有网站内容向下推到下拉 block 内内容的高度。不幸的是,当使用带有附加 header 的 Twitter Bootstrap 时,这是不可能实现的,因为固定位置元素在其上方添加内容时不会移动。

我使用简单的 jQuery slideDown 函数向下滑动内容。这是简化的标记示例:

<body>
<div class="slide-down">slide content</div>
<div class="fixed-position-header">header</div>
<div class="main-content">
<div class="fixed-position-sidebar">sidebar</div>
<div class="main-content">main-content</div>
</div>
<div class="footer">footer</div>
</body>

有人知道如何实现吗? Javascript 还是一些聪明的 CSS hack?

最佳答案

您只需在您的 jQuery 中添加一些行,这些行将同时向下动画您的页眉和侧边栏。

$('.button').click(function(){
$('.fixed-position-header, .fixed-position-sidebar').animate({top: '50px'});
});

当然,您必须添加更多逻辑以确保其动画向上返回并确保顶部值类似于向下滑动的高度值。

关于jquery - body中使用固定位置元素时,如何将网站内容向下推,在上面插入内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18926371/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com