2 Divs之间的关系

想象一下div1和div2。 div1的宽度为100％，高度为800px。 div2固定在浏览器的顶部，也有100％的宽度，可能是3000像素高。我试图登陆，所以你看到div1，但是当你向下滚动时，div1滑过去，揭示div2和它的全部内容。这似乎很容易，但我无法弄清楚。2 Divs之间的关系

div1 { 
    width:100%; 
    height: 800px; 
    position: ???; 
    z-index:100; 
    background-color: white; 
} 


div2 { 
    width:100% 
    height: 3000px; 
    position: fixed; 
    background-color: black; 
}

来源

2015-12-03 AdamLeeSFC

好像如果你只是不固定DIV1？是不是你所描述的只是一个标准的滚动？当你滚动时，其他的东西会变得可见 – la1ch3

同意但它不起作用：/ – AdamLeeSFC

首先，您的示例代码有一些缺陷，如错误的CSS选择器（除非你创建了一个名为“DIV1”等自定义标签），缺少在DIV2 CSS规则（width:100%）结束;。您还需要将固定格置于左侧/顶部0以将其放置在移动格子的后面。

要让您的移动div移动，请添加一个bottom margin大小作为它的height，它将滚动出视线/视口。

这种技术有时被称为视差滚动和here is a post showing more how/what one can do

.div1 { 
 
    width:100%; 
 
    height: 800px; 
 
    position: relative; 
 
    z-index:100; 
 
    background-color: white; 
 
    margin-bottom: 800px; 
 
} 
 

 

 
.div2 { 
 
top: 0; 
 
left:0; 
 
width:100%; 
 
height: 3000px; 
 
position: fixed; 
 
background-color: black; 
 
}

<div class="div1"></div> 
 
<div class="div2"></div>

来源

2015-12-03 03:46:12 LGSon

也许指出选择器缺少'.'？ – PSWai

@ParkSoonWai将会这样做，并在知道OP的期望时解释，因为它不仅仅是这样。 – LGSon

2 Divs之间的关系

回答

相关问题