Problems with parallax

Question

body { margin: 0; } nav { width: 100%; height: 53px; background: #fefefe; position: fixed; top: 0; left: 0; z-index: 1; } .parallax { perspective: 1px; height: 100vh; overflow-x: hidden; overflow-y: auto; } .hero { background: #00f; height: 100vh; transform: translateZ(-1px) scale(2); } .product { background: #003; height: 100%; position: relative; } .footer { height: 40px; background-color: #030; } img { width: 100%; height: 100%; object-fit: cover; }

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <nav></nav> <div class="parallax"> <div class="hero"> <img src="img/flowers.jpg"> </div> <div class="product"></div> <div class="footer"></div> </div> </body> </html>

Hi. The problem is such a navigation bar that with a fiscal position stands on top of a scroll. If it is also placed in a group with parallax, it becomes not fixed.

HamSter HamSter 18k five 33 83 · Answer 1 · 2016-09-21T15:54:23

 body { margin: 0; padding-top: 53px; } nav { width: 100%; height: 53px; background: #fefefe; position: fixed; top: 0; left: 0; z-index: 1; } .parallax { perspective: 1px; height: 100vh; overflow-x: hidden; overflow-y: auto; } .hero { background: #00f; height: 100vh; transform: translateZ(-1px) scale(2); } .product { background: #003; height: 100%; position: relative; } .footer { height: 40px; background-color: #030; } img { width: 100%; height: 100%; object-fit: cover; }

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <nav></nav> <div class="parallax"> <div class="hero"> <img src="img/flowers.jpg"> </div> <div class="product"></div> <div class="footer"></div> </div> </body> </html>

Alexey Prokopenko Alexey Prokopenko 1,476 five nineteen · Answer 2 · 2016-09-21T12:39:14

Add the parallax-wrapper container and indent it by the amount of header

 body { margin: 0; } nav { width: 100%; height: 53px; background: red; position: fixed; top: 0; left: 0; z-index: 1; } .parallax-wrapper { box-sizing: border-box; height: 100vh; padding-top: 53px } .parallax { perspective: 1px; height: 100%; overflow-x: hidden; overflow-y: auto; } .hero { background: #00f; height: 100%; transform: translateZ(-1px) scale(2); } .product { background: #003; height: 100%; position: relative; } .footer { height: 40px; background-color: #030; } img { width: 100%; height: 100%; object-fit: cover; }

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <nav></nav> <div class="parallax-wrapper"> <div class="parallax"> <div class="hero"> <img src="img/flowers.jpg"> </div> <div class="product"></div> <div class="footer"></div> </div> </body> </html>

And it turns out that the scrolling does not reach the navbar. I can achieve this when I take the parallax nav from the container. I also need to scroll the heder

Problems with parallax

2 answers 2

More articles: