when scroll down then show div code example
Example 1: when div is scrolled to it displays
window.addEventListener('scroll', function() {
var element = document.querySelector('#main-container');
var position = element.getBoundingClientRect();
// checking whether fully visible
if(position.top >= 0 && position.bottom <= window.innerHeight) {
console.log('Element is fully visible in screen');
}
// checking for partial visibility
if(position.top < window.innerHeight && position.bottom >= 0) {
console.log('Element is partially visible in screen');
}
});
Example 2: when div is scrolled to it displays
var observer = new IntersectionObserver(function(entries) {
// isIntersecting is true when element and viewport are overlapping
// isIntersecting is false when element and viewport don't overlap
if(entries[0].isIntersecting === true)
console.log('Element has just become visible in screen');
}, { threshold: [0] });
observer.observe(document.querySelector("#main-container"));