Actually, my poorly worded title is a pity, but I don’t know how to explain my question.
I create a portfolio with four main sections, profile cover, biography, websites and photography. Currently, I have every div stacked on top of each other in the basic layout of the website. Instead of scrolling down the page, viewing each section as one long list, I would like the page to look layered. Once the user has reached the end of section 1, for example, section 2 has a fixed position until section 1 completely leaves the browser window. The best example of what I'm trying to ask was made by Vox Media .
Here are a few html and css examples to get you a feel for the properties:
body, html {
width: 100%;
height: 100%;
}
.div1 {
width: 100%;
height: 100%;
background-color: yellow;
padding-top: 300px;
}
.div2 {
width: 100%;
height: 1800px;
background-color: red;
padding-top: 300px;
}
.div3 {
width: 100%;
height: 2400px;
background-color: blue;
padding-top: 300px;
}
.div4 {
width: 100%;
height: 100%;
background-color: green;
padding-top: 300px;
}
<div class="div1"><h1>Profile Cover</h1></div>
<div class="div2"><h1>Bio</h1></div>
<div class="div3"><h1>Websites</h1></div>
<div class="div4"><h1>Photography</h1></div>
I did not write JS to go along with HTML and CSS, because I do not know what to enter.
The first time using this forum, so I apologize if I missed some settings or functions that will help you answer my question. Thanks in advance, Matt.
source
share