jQuery se dispara cuando 2/3s de div están en la ventana gráfica

scroll viewport

Question

Necesito cambiar el elemento de menú "activo" en el sitio web de una página, cuando el usuario se desliza hacia abajo o hacia arriba y algo así como dos tercios de div son visibles en la ventana gráfica. Encontré algunos complementos de jQuery, pero todos fueron cuando se ve todo el div.

Simplemente necesito actuar igual que en esta página: https://vivaldi.com/

Y mi página se verá algo así como: http://jsfiddle.net/kwbddvau/2/

html{height:calc(100% - 100px) !important;width:100% !important; margin:0px; padding:0px;}

body{height:500% !important;width:100% !important; margin:0px; padding:0px;}

.page {height:20% !important; width:100% !important;}

#page1{background-color:red; margin-top: 100px;}

#page3{background-color:green;}

#page5{background-color:blue;}

#menu{width: 100%; height: 100px; color: #fff; background-color: black; position: fixed; top:0px}

#menu a {color: white; text-decoration:none;}

#menu a.active {color: red; text-decoration:underline;}

<div id="menu"><div id="menu"><a href="#page1" class="active">Home</a> | <a href="#page2">Page 2</a> | <a href="#page3">Page 3</a> | <a href="#page4">Page 4</a> | <a href="#page5">Page 5</a></div>
</div>
<div id="page1" class="page">
page1
</div>
<div id="page2" class="page">
page2
</div>
<div id="page3" class="page">
page3
</div>
<div id="page4" class="page">
page4
</div>
<div id="page5" class="page">
page5
</div>

Answer 1

Tratar

var page = $(".page")
, menu = $("#menu");
$(window).on("scroll", function (e) {    
    var res = $.grep(page, function (el) {
        return el.getBoundingClientRect().top <= 180 && (el.getBoundingClientRect().bottom >= 180)
   });
    var id = res.slice(-1)[0].id;  
    menu.find("." + id)
    .addClass("active")
    .siblings()
    .removeClass("active")   
}).scroll();

jsfiddle http://jsfiddle.net/kwbddvau/8/

var page = $(".page")
, menu = $("#menu");
$(window).on("scroll", function (e) {    
var res = $.grep(page, function (el) {
    return el.getBoundingClientRect().top <= 180 && (el.getBoundingClientRect().bottom >= 180)
   });
var id = res.slice(-1)[0].id;  
menu.find("." + id)
.addClass("active")
.siblings()
.removeClass("active")   
}).scroll();

html {
    height:calc(100% - 100px) !important;
    width:100% !important;
    margin:0px;
    padding:0px;
}
body {
    height:500% !important;
    width:100% !important;
    margin:0px;
    padding:0px;
}
.page {
    height:20% !important;
    width:100% !important;
}
#page1 {
    background-color:red;
    margin-top: 100px;
}
#page3 {
    background-color:green;
}
#page5 {
    background-color:blue;
}
#menu {
    width: 100%;
    height: 100px;
    color: #fff;
    background-color: black;
    position: fixed;
    top:0px
}
.active {
    border-bottom:2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="menu"> <span class="page1">MENU</span>  <span class="page2">MENU</span>  <span class="page3">MENU</span>
 <span class="page4">MENU</span>  <span class="page5">MENU</span>

</div>
<div id="page1" class="page">page1</div>
<div id="page2" class="page">page2</div>
<div id="page3" class="page">page3</div>
<div id="page4" class="page">page4</div>
<div id="page5" class="page">page5</div>