Parallax scroll bar unter festen Container

Question

Ich versuche, den Parallax-Effekt auf einer Website mit einer festen Navigationsleiste am oberen Rand der Seite zu verwenden. Aufgrund der Art und Weise, wie der Parallax-Effekt mit Überläufen zusammenhängt, scheint die Bildlaufleiste unterhalb der festen Navigationsleiste oben auf der Seite zu sitzen.

Ich habe eine fiddle to demonstrate this enthalten.

Ich habe versucht, die feste Navbar div in den Parallax Container zu platzieren. Dadurch wird die Navigationsleiste unter der Bildlaufleiste verschoben, die Navigationsleiste wird jedoch nicht am oberen Seitenrand fixiert.

Hier ist mein Code so weit ...

HTML

<div class="navbar">NavBar</div> 
    <div class="parallax"> 
    <div class="parallax_layer parallax_layer_back"> 
     <img class="backgroundImage" src="https://images.pexels.com/photos/131212/pexels-photo-131212.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"> 
    </div> 
    <div class="parallax_layer parallax_layer_base"> 
     <div class="title">Title</div> 
     <div class="content">Content area</div> 
    </div> 
    </div> 

CSS

.parallax { 
    height: 100vh; 
    overflow-x: hidden; 
    overflow-y: initial; 
    perspective: 1px; 
    -webkit-perspective: 1px; 
} 

.parallax_layer { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.parallax_layer_base { 
    transform: translateZ(0); 
    -webkit-transform: translateZ(0); 
} 

.parallax_layer_back { 
    transform: translateZ(-1px); 
    -webkit-transform: translateZ(-1px); 
} 

.parallax_layer_back { transform: translateZ(-1px) scale(2); } 

.parallax_layer_deep { transform: translateZ(-2px) scale(3); } 

/* Example CSS for content */ 

* { 
    margin: 0; 
    padding: 0; 
} 

.title { 
    position: absolute; 
    left: 10%; 
    top: 30%; 
    color: white; 
    font-size: 300%; 
} 

.backgroundImage { 
    width: 100%; 
    height: auto; 
} 

.content { 
    margin-top: 100vh; 
    width: 100%; 
    height: 800px; 
    background-color: #e67e22; 
} 

.navbar {width:100%; position: fixed; z-index: 999; background-color: red;} 

Answer 1

auf Ihrem Quellcode Basierend, ich habe ein paar Änderungen vorgenommen. Ich werde Schritt für Schritt erklären.

Nehmen Sie an, dass die Höhe Ihrer NavBar 50px ist, senken Sie .parallax Klasse 50px ab, indem Sie margin-top:50px; verwenden.

Außerdem müssen wir die position-Eigenschaft Ihres NavBar von fixed zu absolute ändern.

Jetzt gibt es 2 Bildlaufleiste, eine für den Körper und eine für die .parallax Inhalt. Um die Bildlaufleiste des Körpers zu verbergen, die nicht notwendig ist, können wir overflow:hidden; für Body-Tag verwenden.

Diesmal sehen Sie, dass Ihre NavBar die Bildlaufleiste nicht abdeckt, aber die Unterseite der Bildlaufleiste ist leider nicht zu sehen, da der Inhalt 50px von oben nach unten verschoben ist. Um dies zu lösen, verwende ich einen einfachen Jquery-Code, um Höhe gleich der verbleibenden Fensterhöhe zu setzen.

Sie können sich das Snippet ansehen.

$(document).ready(function(){ 
 
    $(".parallax").css("height",$(window).height()-50); 
 
});

.parallax { 
 
    margin-top:50px; 
 
    overflow-x: hidden; 
 
    overflow-y: initial; 
 
    perspective: 1px; 
 
    -webkit-perspective: 1px; 
 
} 
 

 
.parallax_layer { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 
.parallax_layer_base { 
 
    transform: translateZ(0); 
 
    -webkit-transform: translateZ(0); 
 
} 
 

 
.parallax_layer_back { 
 
    transform: translateZ(-1px); 
 
    -webkit-transform: translateZ(-1px); 
 
} 
 

 
/* Depth Correction */ 
 

 
.parallax_layer_back { transform: translateZ(-1px) scale(2); } 
 

 
.parallax_layer_deep { transform: translateZ(-2px) scale(3); } 
 

 
/* Example CSS for content */ 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.title { 
 
    position: absolute; 
 
    left: 10%; 
 
    top: 30%; 
 
    color: white; 
 
    font-size: 300%; 
 
} 
 

 
.backgroundImage { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.content { 
 
    margin-top: 100vh; 
 
    width: 100%; 
 
    height: 800px; 
 
    background-color: #e67e22; 
 
} 
 

 
.navbar { 
 
    width:100%; 
 
    position: absolute; 
 
    top:0; 
 
    z-index: 999; 
 
    background-color: red; 
 
    height:50px; 
 
} 
 

 
body{ 
 
    overflow:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navbar"> NavBar </div> 
 
    <div class="parallax"> 
 
    <div class="parallax_layer parallax_layer_back"> 
 
     <img class="backgroundImage" src="https://images.pexels.com/photos/131212/pexels-photo-131212.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"> 
 
    </div> 
 
    <div class="parallax_layer parallax_layer_base"> 
 
    <div class="title">Title</div> 
 
    <div class="content">Content area</div> 
 
    </div> 
 
</div>