Show / hide DIV when scroll page
Question
I want to show the "hide_show" section when I scroll down and the "three" section appears on the screen. I want to hide the "hide_show" section when I scroll up and the "three" section disappears from the screen. I want to use JS with "fade in / face out" effect. Please help
.hide_show { height: 50px; background-color: #cfcfcf; margin-top: -50px; } #two { background-color: cyan; } #three { background-color: red; } #four { background-color: yellow; }
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <section class="hide_show"> <div class="container"> <div class="row"> <div class="col-12"> one </div> </div> </div> </section> <section id="two"> <div class="container"> <div class="row"> <div class="col-12"> two <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </div> </div> </section> <section id="three"> <div class="container"> <div class="row"> <div class="col-12"> three <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </div> </div> </section> <section id="four"> <div class="container"> <div class="row"> <div class="col-12"> four <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </div> </div> </section> </body>
1 answers
solution1
0 ACCPTED 2019-07-03 03:16:23
It was a bit difficult to fully understand the question, but this should hopefully get you started.
Let me know if you have any other questions on what each part of this does.
let three = document.querySelector('#three') let hideShow = document.querySelectorAll('.hide_show') document.addEventListener('scroll', () => { // If the user has scrolled to the three section if (window.pageYOffset >= three.offsetTop) { hideShow.forEach((item) => { item.style.display = 'block' }) // If the user has not reached the three section } else { hideShow.forEach((item) => { item.style.display = 'none' }) } })
.hide_show { /* Force the hideShow section to always be at the top */ position: sticky; top: 0; display: none; height: 50px; background-color: #cfcfcf; margin-top: -50px; } #two { background-color: cyan; } #three { background-color: red; } #four { background-color: yellow; }
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <section class="hide_show"> <div class="container"> <div class="row"> <div class="col-12"> one </div> </div> </div> </section> <section id="two"> <div class="container"> <div class="row"> <div class="col-12"> two <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </div> </div> </section> <section id="three"> <div class="container"> <div class="row"> <div class="col-12"> three <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </div> </div> </section> <section id="four"> <div class="container"> <div class="row"> <div class="col-12"> four <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </div> </div> </section> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Hide div when you can't scroll the page and show div when there is a scroll bar and you need to scroll the page
Show/hide div and scroll to it
Show / Hide div on scroll
Hide div only when scroll is not available on page
Show div after scroll and hide div at the end of the page
Show div when page scroll down in jquery
Hide and show div when page load
Show/hide div with scroll, starting from bottom of the page
How to show and hide div on scroll
Hide/Show div on click and scroll
Related Tags