How to find the section reaches the top and add a class using plain javascript
Question
I am writing a function to check if any of my section reaches the top of window then add a class. Not sure what I am missing any help would be really appreciated.
<body>
<section class="row"></section>
<section class="row"></section>
<section class="row"></section>
<section class="row"></section>
</body>
let _handleSectionAnimation = function() {
let sections = document.querySelectorAll('.row');
let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
Array.prototype.forEach.call(sections, function(el, i) {
console.log("element scroll top = " + el.scrollTop);
let offsetElement = el.offsetHeight;
if(currentScroll > offsetElement) {
el.classList.add('animate');
}
});
}
2 answers
solution1
0 2018-10-01 12:11:44
(1) You need to do sth only when user is done scrolling and for that check out my(smacaz, posibly the last answer) answer here jQuery scroll() detect when user stops scrolling (2) Any visible element must be below window dot scrolltop and its bottom must be at position less than the value of window dot scrolltop + window dot height (3) position of any element can be fetched with window dot offset dot top (jquery)
Since we do sth when they're done scrolling, we don't care whether they are scrolling top to bottom or bottom to top. Assuming you have jquery the code:
function checkVisibleSection(element){ /* @param element is a valid element to be selected(the sections), eg #section etc. Depending on the section width, more than one section can still be visible to user at a time, in any case we want the first fully visible */ var el = $(element); var l = el.length; /* now get the visible part of the screen (the top boundary) */ var top = $(window).scrollTop(); /* now get the visible part of the screen (the bottom boundary) */ var bot = top+($(window).height()); /* check the first fully visible section and do sth there */ for(var i=0;i<l;i++){ var ofs = el.eq(i).offset().top; var ofh = ofs+ el.eq(i).height(); if(ofs > top && ofs < bot){ /* we've got the element, do anything with it here eg, below */ el.eq(i).css({'border':'5px solid red'}); } } }
I have verified this code and it is working fine now.
solution2
0 2018-10-01 13:25:01
Here is the full working code and how to use the checkVisibleSection function with scroll stop:
$(function(){ /* asumming you have the following html: <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> */ var t; /* give it a little width and height */ $('.row').css({'width':'80%','height':'500px','border':'1px solid black','display':'block'); document.addEventListener('scroll',function(e){ clearTimeout(t); checkScroll(); }); function checkScroll(){ t = setTimeout(function(){ /* they are done scrolling check which row is visible */ checkVisibleSection('.row'); },500); /* You can increase or reduse timer */ } /* Please copy and paste the code for checkVisibleSection() function here (see it below) */ function checkVisibleSection(element){ /* @param element is a valid element to be selected(the sections), eg #section etc. Depending on the section width, more than one section can still be visible to user at a time, in any case we want the first fully visible */ var el = $(element); var l = el.length; /* now get the visible part of the screen (the top boundary) */ var top = $(window).scrollTop(); /* now get the visible part of the screen (the bottom boundary) */ var bot = top+($(window).height()); /* check the first fully visible section and do sth there */ for(var i=0;i<l;i++){ var ofs = el.eq(i).offset().top; var ofh = ofs+ el.eq(i).height(); if(ofs > top && ofs < bot){ /* we've got the element, do anything with it here eg, below */ /* clear all previous operation (reset to default) to avoid duplicates */ el.css({'border':'1px solid black'}); /* start a new operation */ el.eq(i).css({'border':'5px solid red'}); } } } });
Tested and working
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.