JQuery trigger when 2 / 3s divs are in viewport

Question

I need to change the “active” menu item on a single page website when the user slides down or up, and something like two-thirds of the div is visible in the viewport. I found some jQuery plugins, but they all were when the full div was being viewed.

I just need to act the same as on this page: https://vivaldi.com/

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