Как вариант...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.on {
border: 1px solid;
}
.on:hover {
background-color: rgb(204, 255, 204);
}
</style>
</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").className = 'on';
} else{
document.getElementById("test-elem1").className = '';
};
};
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>