Подскажите необходимо задавать фон 1 элементу при прокрутке до другого.
Нашел на форуме скрипт, применил, все работает но нужно что бы он срабатывал 2 раз, когда навожу и когда не навожу, а он у меня постоянно отрабатывает.
Поправьте плизз:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body style="height: 2000px">
<span id="test-elem1" style="font-size: 30px;position:fixed;">TEST1</span>
<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><br><br><br>
<span id="test-elem" style="font-size: 30px">TEST</span>
<script>
window.onscroll = function() {
if ( checkViewport() ) {
// выполнится если элемент хотя бы частично видно
document.getElementById("test-elem1").style.background = "rgb(204, 255, 204)";
}
else{document.getElementById("test-elem1").style.background = "white";}
}
function checkViewport() {
var $myElement = document.getElementById("test-elem"),
landmark = $myElement.getBoundingClientRect(),
visibility = landmark.top + $myElement.scrollHeight > 0 && landmark.left + $myElement.scrollWidth > 0 && landmark.bottom - $myElement.scrollHeight < document.documentElement.clientHeight && landmark.right - $myElement.scrollWidth < document.documentElement.clientWidth
return visibility
}
</script>
</body>
</html>
Или все правельно все так и должно быть?
И подскажите как быть если необходимо реализовать данный скрипт для 2 div
<span id="test-elem1" style="font-size: 30px;position:fixed;">TEST1</span>
<span id="test-elem10" style="font-size: 30px;position:fixed;">TEST10</span>
<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>
<span id="test-elem0" style="font-size: 30px">TEST0</span>
<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>
<span id="test-elem" style="font-size: 30px">TEST</span>