Mein Hintergrund-Anhang: behoben funktioniert nicht

-1

Ich versuche, meine #main Div Scroll über meine # main2 div zu machen. Ich positioniere sowohl absolut als auch Hintergrund-Attachment: behoben auf # main2, aber der beabsichtigte Effekt scheint nicht zu funktionieren. BY "scroll on top" Ich meine, wenn Sie mit der Maus nach unten scrollen, #main sollte nach unten in Richtung einer festen # main2 scrollen. # main2 sollte wie das Hintergrundbild des Körpers sein, während # main1 flüssig zum unteren Teil des Körpers scrollt.Mein Hintergrund-Anhang: behoben funktioniert nicht

https://www.youtube.com/watch?v=GJLzP_4bg3o @ 7: 50 ist, was ich versuche zu replizieren.

body { 
 
    margin: 0 auto; 
 
} 
 

 
#main { 
 
    position: absolute; 
 
    width: 100%; 
 
\t height: 100%; 
 
\t background-color: red; 
 
} 
 

 
#main2 { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: blue; 
 
    top: 100%; 
 
    background-attachment: fixed; 
 
}

<!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>

Quelle

2016-04-14 noddy

Ich weiß nicht, was Sie meinen, indem Sie oben scrollen. vielleicht kannst du das klären? Ist auch die Befestigung notwendig? –

Was ist der "beabsichtigte Effekt"? Ihr Code tut genau das, was er in Bezug auf das von Ihnen bereitgestellte Snippet tun soll. – Paul

'background-attachment' funktioniert, wenn ein' background-image' angegeben wird. Siehe diesen Link https://developer.mozilla.org/en/docs/Web/CSS/background-attachment – Pugazh

überprüfen dies Sie, wenn Hilfe.

<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>

Quelle

2016-04-14 06:53:56 Dev

und bitte formatieren Sie den Code – Dev

vereinbart ... schreckliche Side-Scroll ... grrr ... –

Nur #main-position: fixed; ändern und geben z-index: 1;

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; 
 
}

<!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>

Quelle

2016-04-14 07:08:08 ketan

Um die Parallaxe-Effekt zu bekommen, Ich habe gerade die Hintergrundfarbe auf Hintergrund-Bild und es funktioniert jetzt .

Quelle

2016-04-17 13:32:56 noddy

Mein Hintergrund-Anhang: behoben funktioniert nicht

Antwort

Verwandte Themen