Как при появлении элемента в видимой области экрана изменить другой элемент?

Здравствуйте.

Подскажите, пожалуйста, как мне сделать так, чтобы когда в видимой области появляется #box2, то #cd .is-selected .cd-dot стал залит красным цветом. Сразу объясню, что jquery принципе совсем не знаю и скрипт скроллинга написать для меня сложно, поэтому нашел какой-то похожий скрипт, но получилась каша и ничего, естественно, не работает.

function come(elem){
var docViewTop = $(window).scrollTop(),
docViewBottom = docViewTop + $(window).height(),
elemTop = $(''+elem+'').offset(),
elemTop = elemTop.top;
if((elemTop <= docViewBottom) && (elemTop >= docViewTop)){ return '1';}else if(elemTop >= docViewTop){return '2';}else{return '3';}
return false;
}
function getBodyScrollTop(){
if(come('#box2') == '1'){
$('.no-touch #cd-vertical-nav a.is-selected .cd-dot').attr('class', '');
$('.no-touch #cd-vertical-nav a.is-selected .cd-dot').css('background', 'red');
$('.no-touch #cd-vertical-nav a.is-selected .cd-dot').attr('class', '');
$('.no-touch #cd-vertical-nav a.is-selected .cd-dot').css('transition', 'all 0.3s');
}
window.addEventListener("scroll", getBodyScrollTop);