jQuery desencadear quando 2 / 3s de div estão em viewport

Eu preciso alterar o item de menu “ativo” no site de uma página, quando o usuário desliza para baixo ou para cima e algo como dois terços do div são visíveis na viewport. Eu encontrei alguns plugins jQuery, mas todos eles foram quando div toda é visto.

Simplesmente eu preciso agir da mesma forma como nesta página: https://vivaldi.com/

E minha página será algo 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;} 
  
page1
page2
page3
page4
page5

Experimentar

 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; } 
   
page1
page2
page3
page4
page5