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

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>