当用户向下或向上滑动并且在视口中可见三分之二的 div 时，我需要更改单页网站上的“活动”菜单项。我发现了一些 jQuery 插件，但所有这些插件都是在查看整个 div 时出现的。
简而言之，我需要像此页面上一样操作：https://vivaldi.com/
我的页面看起来像这样：http://jsfiddle.net/kwbddvau/2/ 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>
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();
jsfiddlehttp://jsfiddle.net/kwbddvau/8/ 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
