Add Styles to menu items while lowering the screen with Jquery

Hello, I have a menu with this structure ..

<div id="MenuWrapper">
    <nav class="menu">
        <ul>
            <li><a href="#nosotros" id="mak1">nosotros</a></li>
            <li><a href="#clientes" id="mak2">clientes</a></li>
            <li><a href="#servicios" id="mak3">servicios</a></li>
            <li><a href="#portafolio" id="mak4">portafolio</a></li>
            <li><a href="#contacto" id="mak5">contacto</a></li>
        </ul>           
    </nav>
</div>

And a content with these divs, which each occupy the vertical height of 100% of the screen ...

<div class="anckaje" id="ak1">Contenido Nostros</div>
<div class="anckaje" id="ak2">Contenido Clientes</div>
<div class="anckaje" id="ak3">Contenido Servicios</div>
<div class="anckaje" id="ak4">Cotenido Portafolio</div>
<div class="anckaje" id="ak5">Contenido Contacto</div>

I need that when entering in viewport each div of content adds me a class to the item of the menu that corresponds to him.

For example if the viewport is above <div id="ak1">Nosotros</div> is added to <a id="mak1" class="ClaseAgregada">

I tried to use this, but it does not work ...

$(document).ready(function() { 

    if ($('#ak1').visible(true)) {    
        $('#mak1').addClass('ClaseAgregada');
    }
    if ($('#ak2').visible(true)) {    
        $('#mak2').addClass('ClaseAgregada');
    }
    if ($('#ak3').visible(true)) {    
        $('#mak3').addClass('ClaseAgregada');
    }
    if ($('#ak4').visible(true)) {    
        $('#mak4').addClass('ClaseAgregada');
    }
    if ($('#ak5').visible(true)) {    
        $('#mak5').addClass('ClaseAgregada');
    }
});

I do not know what to use instead of .visible(true)

I appreciate your cooperation.