function elementInViewport(element, offsetTop, offsetBottom){
var bounds = element.getBoundingClientRect();
return (
(bounds.top + bounds.height - bounds.height * offsetBottom > 0) && // Элемент ниже верхней границы на offsetBottom %
(window.innerHeight - bounds.top - bounds.height * offsetTop > 0) // Элемент выше нижней границы на offsetTop %
);
}
document.addEventListener('scroll', function() {
var inViewport = elementInViewport(container, .5, .5);
if(inViewport) {
// элемент во пределах видимой части экрана
anim.play();
} else {
// элемент за пределами видимой части экрана
anim.stop();
}
});
<li class="dropdown1">Our proposals </li>
<ul class="dropdown-content">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
</ul>
<li class="dropdown1">Our proposals
<ul class="dropdown-content">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
</ul>
</li>