How to hide a div while scrolling using pure JS?
0
so I have a div that covers my whole web page. Beneath it I also have a set of divs. I want to be able to hide my div while scrolling down so my other divs beneath it can start appearing.
the div for now is colored in black with an absolute position. I want this div to be the first page the user sees and then it starts hiding when the user scrolls down and the other divs beneath it to appear.
Here is my html:
body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
}<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>how can I do that with pure JS or CSS?
javascript html css
edited Nov 21 '18 at 15:50
connexo
22.8k83762
asked Nov 21 '18 at 15:43
Mustafa AnasMustafa Anas
148
add a comment |
0
so I have a div that covers my whole web page. Beneath it I also have a set of divs. I want to be able to hide my div while scrolling down so my other divs beneath it can start appearing.
the div for now is colored in black with an absolute position. I want this div to be the first page the user sees and then it starts hiding when the user scrolls down and the other divs beneath it to appear.
Here is my html:
body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
}<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>how can I do that with pure JS or CSS?
javascript html css
edited Nov 21 '18 at 15:50
connexo
22.8k83762
asked Nov 21 '18 at 15:43
Mustafa AnasMustafa Anas
148
add a comment |
0
0
0
so I have a div that covers my whole web page. Beneath it I also have a set of divs. I want to be able to hide my div while scrolling down so my other divs beneath it can start appearing.
the div for now is colored in black with an absolute position. I want this div to be the first page the user sees and then it starts hiding when the user scrolls down and the other divs beneath it to appear.
Here is my html:
body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
}<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>how can I do that with pure JS or CSS?
javascript html css
edited Nov 21 '18 at 15:50
connexo
22.8k83762
asked Nov 21 '18 at 15:43
Mustafa AnasMustafa Anas
148
so I have a div that covers my whole web page. Beneath it I also have a set of divs. I want to be able to hide my div while scrolling down so my other divs beneath it can start appearing.
the div for now is colored in black with an absolute position. I want this div to be the first page the user sees and then it starts hiding when the user scrolls down and the other divs beneath it to appear.
Here is my html:
body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
}<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>how can I do that with pure JS or CSS?
body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
}<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
}<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>javascript html css
javascript html css
edited Nov 21 '18 at 15:50
connexo
22.8k83762
asked Nov 21 '18 at 15:43
Mustafa AnasMustafa Anas
148
edited Nov 21 '18 at 15:50
connexo
22.8k83762
asked Nov 21 '18 at 15:43
Mustafa AnasMustafa Anas
148
edited Nov 21 '18 at 15:50
connexo
22.8k83762
edited Nov 21 '18 at 15:50
connexo
22.8k83762
edited Nov 21 '18 at 15:50
connexo
22.8k83762
22.8k83762
asked Nov 21 '18 at 15:43
Mustafa AnasMustafa Anas
148
asked Nov 21 '18 at 15:43
Mustafa AnasMustafa Anas
148
asked Nov 21 '18 at 15:43
Mustafa AnasMustafa Anas
148
148
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
0
I'd suggest applying a scroll listener putting a CSS class on your overlay div that causes a fade transition:
document.addEventListener('scroll', () => { toHide.classList.add('hiddenByScroll')});body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity .3s ease-in-out;
opacity: 1;
}
#toHide.hiddenByScroll {
opacity: 0;
pointer-events: none;
}<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>Make sure to also apply pointer-events: none;, otherwise the element will be invisible, but cannot be "clicked through" as it is still there.
answered Nov 21 '18 at 15:54
connexoconnexo
22.8k83762
add a comment |
0
The easiest way would be to add this:
<script>
window.onscroll = function() {
document.getElementById("toHide").style.display = "none";
}
</script>
Here is a jsfiddle: https://jsfiddle.net/phv6Lfun/
answered Nov 21 '18 at 16:03
digijaydigijay
6061916
add a comment |
0
You can achieve what you want by modifying the opacity property of the div once the user begins to scroll. Also, here's a working example and a reference for onscroll :)
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
toHide.style.opacity = 0;
}html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>On the other hand, since you mentioned you want the div to be the first thing your users see when your page loads, you can do something like this so it'll reappear when the user scrolls back up to the top again:
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
// if the user scrolled down, scrollY will be greater than 0
if(window.scrollY > 0){
toHide.classList.add('hide');
}
else{
toHide.classList.remove('hide');
}
}html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}
.hide {
opacity: 0;
}<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>Here's a working example for the snippet above and a reference to scrollY.
The second example also makes use of a css class (.hide) instead of modifying the involved property using solely pure JS. The class is dynamically added and removed using the addClass and removeClass methods of the toHide div'sclassList property respectively.
answered Nov 21 '18 at 15:50
C.RaysOfTheSunC.RaysOfTheSun
645128
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415672%2fhow-to-hide-a-div-while-scrolling-using-pure-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I'd suggest applying a scroll listener putting a CSS class on your overlay div that causes a fade transition:
document.addEventListener('scroll', () => { toHide.classList.add('hiddenByScroll')});body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity .3s ease-in-out;
opacity: 1;
}
#toHide.hiddenByScroll {
opacity: 0;
pointer-events: none;
}<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>Make sure to also apply pointer-events: none;, otherwise the element will be invisible, but cannot be "clicked through" as it is still there.
answered Nov 21 '18 at 15:54
connexoconnexo
22.8k83762
add a comment |
0
I'd suggest applying a scroll listener putting a CSS class on your overlay div that causes a fade transition:
document.addEventListener('scroll', () => { toHide.classList.add('hiddenByScroll')});body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity .3s ease-in-out;
opacity: 1;
}
#toHide.hiddenByScroll {
opacity: 0;
pointer-events: none;
}<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>Make sure to also apply pointer-events: none;, otherwise the element will be invisible, but cannot be "clicked through" as it is still there.
answered Nov 21 '18 at 15:54
connexoconnexo
22.8k83762
add a comment |
0
0
0
I'd suggest applying a scroll listener putting a CSS class on your overlay div that causes a fade transition:
document.addEventListener('scroll', () => { toHide.classList.add('hiddenByScroll')});body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity .3s ease-in-out;
opacity: 1;
}
#toHide.hiddenByScroll {
opacity: 0;
pointer-events: none;
}<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>Make sure to also apply pointer-events: none;, otherwise the element will be invisible, but cannot be "clicked through" as it is still there.
answered Nov 21 '18 at 15:54
connexoconnexo
22.8k83762
I'd suggest applying a scroll listener putting a CSS class on your overlay div that causes a fade transition:
document.addEventListener('scroll', () => { toHide.classList.add('hiddenByScroll')});body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity .3s ease-in-out;
opacity: 1;
}
#toHide.hiddenByScroll {
opacity: 0;
pointer-events: none;
}<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>Make sure to also apply pointer-events: none;, otherwise the element will be invisible, but cannot be "clicked through" as it is still there.
document.addEventListener('scroll', () => { toHide.classList.add('hiddenByScroll')});body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity .3s ease-in-out;
opacity: 1;
}
#toHide.hiddenByScroll {
opacity: 0;
pointer-events: none;
}<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>document.addEventListener('scroll', () => { toHide.classList.add('hiddenByScroll')});body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity .3s ease-in-out;
opacity: 1;
}
#toHide.hiddenByScroll {
opacity: 0;
pointer-events: none;
}<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>answered Nov 21 '18 at 15:54
connexoconnexo
22.8k83762
answered Nov 21 '18 at 15:54
connexoconnexo
22.8k83762
answered Nov 21 '18 at 15:54
connexoconnexo
22.8k83762
answered Nov 21 '18 at 15:54
connexoconnexo
22.8k83762
22.8k83762
add a comment |
add a comment |
0
The easiest way would be to add this:
<script>
window.onscroll = function() {
document.getElementById("toHide").style.display = "none";
}
</script>
Here is a jsfiddle: https://jsfiddle.net/phv6Lfun/
answered Nov 21 '18 at 16:03
digijaydigijay
6061916
add a comment |
0
The easiest way would be to add this:
<script>
window.onscroll = function() {
document.getElementById("toHide").style.display = "none";
}
</script>
Here is a jsfiddle: https://jsfiddle.net/phv6Lfun/
answered Nov 21 '18 at 16:03
digijaydigijay
6061916
add a comment |
0
0
0
The easiest way would be to add this:
<script>
window.onscroll = function() {
document.getElementById("toHide").style.display = "none";
}
</script>
Here is a jsfiddle: https://jsfiddle.net/phv6Lfun/
answered Nov 21 '18 at 16:03
digijaydigijay
6061916
The easiest way would be to add this:
<script>
window.onscroll = function() {
document.getElementById("toHide").style.display = "none";
}
</script>
Here is a jsfiddle: https://jsfiddle.net/phv6Lfun/
answered Nov 21 '18 at 16:03
digijaydigijay
6061916
answered Nov 21 '18 at 16:03
digijaydigijay
6061916
answered Nov 21 '18 at 16:03
digijaydigijay
6061916
answered Nov 21 '18 at 16:03
digijaydigijay
6061916
6061916
add a comment |
add a comment |
0
You can achieve what you want by modifying the opacity property of the div once the user begins to scroll. Also, here's a working example and a reference for onscroll :)
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
toHide.style.opacity = 0;
}html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>On the other hand, since you mentioned you want the div to be the first thing your users see when your page loads, you can do something like this so it'll reappear when the user scrolls back up to the top again:
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
// if the user scrolled down, scrollY will be greater than 0
if(window.scrollY > 0){
toHide.classList.add('hide');
}
else{
toHide.classList.remove('hide');
}
}html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}
.hide {
opacity: 0;
}<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>Here's a working example for the snippet above and a reference to scrollY.
The second example also makes use of a css class (.hide) instead of modifying the involved property using solely pure JS. The class is dynamically added and removed using the addClass and removeClass methods of the toHide div'sclassList property respectively.
answered Nov 21 '18 at 15:50
C.RaysOfTheSunC.RaysOfTheSun
645128
add a comment |
0
You can achieve what you want by modifying the opacity property of the div once the user begins to scroll. Also, here's a working example and a reference for onscroll :)
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
toHide.style.opacity = 0;
}html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>On the other hand, since you mentioned you want the div to be the first thing your users see when your page loads, you can do something like this so it'll reappear when the user scrolls back up to the top again:
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
// if the user scrolled down, scrollY will be greater than 0
if(window.scrollY > 0){
toHide.classList.add('hide');
}
else{
toHide.classList.remove('hide');
}
}html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}
.hide {
opacity: 0;
}<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>Here's a working example for the snippet above and a reference to scrollY.
The second example also makes use of a css class (.hide) instead of modifying the involved property using solely pure JS. The class is dynamically added and removed using the addClass and removeClass methods of the toHide div'sclassList property respectively.
answered Nov 21 '18 at 15:50
C.RaysOfTheSunC.RaysOfTheSun
645128
add a comment |
0
0
0
You can achieve what you want by modifying the opacity property of the div once the user begins to scroll. Also, here's a working example and a reference for onscroll :)
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
toHide.style.opacity = 0;
}html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>On the other hand, since you mentioned you want the div to be the first thing your users see when your page loads, you can do something like this so it'll reappear when the user scrolls back up to the top again:
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
// if the user scrolled down, scrollY will be greater than 0
if(window.scrollY > 0){
toHide.classList.add('hide');
}
else{
toHide.classList.remove('hide');
}
}html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}
.hide {
opacity: 0;
}<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>Here's a working example for the snippet above and a reference to scrollY.
The second example also makes use of a css class (.hide) instead of modifying the involved property using solely pure JS. The class is dynamically added and removed using the addClass and removeClass methods of the toHide div'sclassList property respectively.
answered Nov 21 '18 at 15:50
C.RaysOfTheSunC.RaysOfTheSun
645128
You can achieve what you want by modifying the opacity property of the div once the user begins to scroll. Also, here's a working example and a reference for onscroll :)
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
toHide.style.opacity = 0;
}html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>On the other hand, since you mentioned you want the div to be the first thing your users see when your page loads, you can do something like this so it'll reappear when the user scrolls back up to the top again:
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
// if the user scrolled down, scrollY will be greater than 0
if(window.scrollY > 0){
toHide.classList.add('hide');
}
else{
toHide.classList.remove('hide');
}
}html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}
.hide {
opacity: 0;
}<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>Here's a working example for the snippet above and a reference to scrollY.
The second example also makes use of a css class (.hide) instead of modifying the involved property using solely pure JS. The class is dynamically added and removed using the addClass and removeClass methods of the toHide div'sclassList property respectively.
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
toHide.style.opacity = 0;
}html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
toHide.style.opacity = 0;
}html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
// if the user scrolled down, scrollY will be greater than 0
if(window.scrollY > 0){
toHide.classList.add('hide');
}
else{
toHide.classList.remove('hide');
}
}html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}
.hide {
opacity: 0;
}<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
// if the user scrolled down, scrollY will be greater than 0
if(window.scrollY > 0){
toHide.classList.add('hide');
}
else{
toHide.classList.remove('hide');
}
}html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}
.hide {
opacity: 0;
}<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>answered Nov 21 '18 at 15:50
C.RaysOfTheSunC.RaysOfTheSun
645128
edited Nov 21 '18 at 16:43
answered Nov 21 '18 at 15:50
C.RaysOfTheSunC.RaysOfTheSun
645128
answered Nov 21 '18 at 15:50
C.RaysOfTheSunC.RaysOfTheSun
645128
answered Nov 21 '18 at 15:50
C.RaysOfTheSunC.RaysOfTheSun
645128
645128
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415672%2fhow-to-hide-a-div-while-scrolling-using-pure-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
