具有固定的侧边栏滚动的视差

Question

I want to make a parallax where when you scroll down, it'll show you the content and the sidebar. As you scroll further, when the side bar reaches the top, it stops there (fixed). At the moment, my sidebar is already fixed and blocks the whole image of the parallax.

Here's how it looks like.

CSS:

body, html {
    height: 100%;
}

#parallax { 
    background-image: url("https://image.jpg");
    height: 100%; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#sidebar {
    padding: 100px;
    position: fixed;
 }

HTML:

<div id="maincontent">
   <div id="sidebar">
        sidebar content here
   </div>
   <div id="content">
   </div>
</div>

I'm not sure what to change or add for the maincontent div to get everything to appear after the parallax.

Answer 1

hope this is what you are searching for:) You need jQuery for my solution:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

This example is just for getting the concept and is way overloaded. I would just suggest you play with the jquery thing

#parallax { 
    background-image: url("https://tailandfur.com/wp-content/uploads/2016/03/40-Big-Dog-Puppy-Pictures-7.jpg");
    height: 100vh; 
    width:100vw;
    background-attachment: fixed;
    background-size: cover;
}

#sidebar {
    height:20%;
    width:20%;
    float:left;
    background-color: orange;
 }
.content{
    float:right;
    height:120%;
    width:80%;
}

The jQuery thing: Everytime the scroll event is fired the browser checks, if the bottom of the parallax div is reached with the top of the browser window --> if browser window top is bigger than the parallax the sidebar is fixed

$(document).scroll(function() {
    if($(document).scrollTop() >= $("#parallax").offset().top + $("#parallax").height()){
        $("#sidebar").css("position", "fixed").css("top", "0").css("left", "0");
    }
    else{
        $("#sidebar").css("position", "relative");
    }
});

HTML:

<div id="parallax"></div>
<div id="maincontent">
    <div id="sidebar" class="relative">sidebar content here</div>
    <div class="content" style="background-color: green;"></div>
    <div class="content" style="background-color: blue;"> </div>
</div>