scroll - jQuery trigger when 2/3s of div are in viewport

Question

I need to change "active" menu item on one-page website, when user slide down or up and something like two thirds of div are visible in viewport. I found some jQuery plugins, but all of them was when whole div is viewed.

Simply I need to act same like on this page: https://vivaldi.com/

And my page will look something like: 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

Try

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>