[英]Div fixed position horizontally with vertical movement upon horizontal scroll
[英]Scroll Fixed Div Upon Collision
我正在尝试创建一个页面,该页面的顶部有两个固定的div(div1和div2),一个div(div3)的页面内容自然地在下面。 当用户滚动并且div3到达div1的底部时,我希望两个div融合在一起并正常滚动。 该网站具有我要复制的确切行为。
我正在使用不同的z索引来使div1和div3保持在div2以上,并在div1和div3触摸时检测到:
$(window).scroll(function(e) {
var calc = $("#div3").offset().top - $("#div1").height();
if ($(this).scrollTop() >= calc)
{
//fuse
}
else
{
//unfuse
}
});
但是我不知道如何将div3和div1融合在一起。
谢谢 :)
这是一个解决方案。 它依赖于.header
和.content-inner
内.content
。 .header
显示为position:fixed
直到达到滚动阈值为止,这时将一个类添加到.content
并且.header
切换回position:static
因此它又回到了页面的常规流程中。
.content-inner
是必需的,因为当.header
返回静态定位时,我们需要减小页margin-top
以腾出空间。
HTML
<div class="banner"></div>
<div class="content">
<div class="header"></div>
<div class="content-inner">
...
</div>
</div>
CSS
body,
html {
margin:0;
padding:0;
}
.banner {
position:fixed;
z-index:-1;
left:0;
right:0;
top:100px;
height:300px;
background-color:#F00;
}
.content {
margin-top:400px;
background-color:#FFF;
position:relative;
}
.content.fuse {
margin-top:300px;
}
.content-inner {
background-color:#FFF;
}
.header {
position:fixed;
height:100px;
background-color:#00F;
left:0;
top:0;
right:0;
}
.content.fuse .header {
position:static;
}
JS
$(window).scroll(function(e) {
if ($(window).scrollTop() < 300)
$('.content').removeClass('fuse');
else
$('.content').addClass('fuse');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.