Skip to content

Instantly share code, notes, and snippets.

@BulatSa
Created August 24, 2017 15:47
Show Gist options
  • Save BulatSa/1648cf2d138b3fb6d4a490d329837c14 to your computer and use it in GitHub Desktop.
Save BulatSa/1648cf2d138b3fb6d4a490d329837c14 to your computer and use it in GitHub Desktop.
Show Visible Elements
/**************************************************
Show Visible Elements
***************************************************/
/**
* Проверяет элемент на попадание в видимую часть экрана.
* Для попадания достаточно, чтобы верхняя или нижняя границы элемента были видны.
*/
function isVisible(elem) {
var coords = elem.getBoundingClientRect();
var windowHeight = document.documentElement.clientHeight;
// верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
var topVisible = coords.top > 0 && coords.top < windowHeight;
var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
return topVisible || bottomVisible;
}
function showVisible() {
var elements = document.querySelectorAll('.fade-top');
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
if (isVisible(element)) {
if (!($(element).hasClass('fade-top--active'))) {
var thisClass = element.getAttribute('class');
element.setAttribute( 'class', thisClass + ' fade-top--active');
}
}
}
}
window.onscroll = showVisible;
showVisible();
/**************************************************
End Show Visible
***************************************************/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment