Question

我正在尝试将#main div滚动到＃main2 div之上。我绝对定位并使用了背景附件：固定在＃main2上，但预期效果似乎不起作用。 BY＆＃34;滚动顶部＆＃34;我的意思是当你向下滚动鼠标时，＃main应向下滚动到固定的#main2。 #main2应该像身体的背景图像，而＃main1流畅地向下滚动到身体的底部。

https://www.youtube.com/watch?v=GJLzP_4bg3o @ 7:50是我想要复制的内容。

＆＃13;

body {
    margin: 0 auto;
}

#main {
    position: absolute;
    width: 100%;
	height: 100%;
	background-color: red;
} 

#main2 {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: blue;
    top: 100%;
    background-attachment: fixed;
}

＆＃13;

<!Doctype HTML>
<head>
   <html lang="en"
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="clc.css">
    <title>CLC Website</title>
</head>

<body>
    <div id="main">        
    </div>
    <div id="main2">
    </div>
</body>
</html>

＆＃13;

Answer 1

检查一下是否有帮助。

<head>
    <style> 
        .main { height: 300px;  width: 300px;background-color: blue;    background-repeat: no-repeat;   background-attachment: fixed;
position: fixed;}
    </style>
</head>
<body>
    <div class="main"></div>
    <div style="background-color: red; height: 3000px; width: 300px"></div>
</body>

Answer 2

只需将#main更改为position: fixed;并提供z-index: 1;

即可

＆＃13;

body {
    margin: 0 auto;
}

#main {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: red;
    z-index: 1;
} 

#main2 {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: blue;
    top: 100%;
    background-attachment: fixed;
}

＆＃13;

<!Doctype HTML>
<head>
   <html lang="en"
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="clc.css">
    <title>CLC Website</title>
</head>

<body>
    <div id="main">        
    </div>
    <div id="main2">
    </div>
</body>
</html>

＆＃13;

Answer 3

为了获得视差效果，我只是将背景颜色更改为背景图像，现在工作正常。

我的背景附件：修复不起作用

3 个答案: