本文已参与「新人创作礼」活动，一起开启掘金创作之路
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片显示</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
.menu-active{
color: #ffaa00;
font-weight: 600;
}
</style>
</head>
<body>
<div class="nav" style="position: fixed;left: 0;top: 100px;">
<ul id="menu-list">
<li><a href="#one" class="links one">Menu 1</a></li>
<li><a href="#two" class="links two">Menu 2</a></li>
<li><a href="#three" class="links three">Menu 3</a></li>
<li><a href="#four" class="links four">Menu 4</a></li>
<li><a href="#five" class="links five">Menu 5</a></li>
<li><a href="#six" class="links six">Menu 6</a></li>
</ul>
</div>
<div class="other-content" style="height: 300px; background-color: #91bfc3;"> 这里是其它的内容，假设内容高度为300px</div>
// 页面与导航对应的内容块
<div id="wrapper">
<div id="one" class="container" style="height: 600px; background-color: #000080;">one</div>
<div id="two" class="container" style="height: 600px; background-color: #528027;">two</div>
<div id="three" class="container" style=" height: 600px; background-color: #306180;">three</div>
<div id="four" class="container" style="height: 600px; background-color: #642c80;">four</div>
<div id="five" class="container" style="height: 600px; background-color: #ce4d22;">five</div>
<div id="six" class="container" style="height: 600px; background-color: #a6dc12;">six</div>
</div>
<script>
$(window).scroll(function() {
var $sections = $('.container'); // 获取所有的内容块
var currentScroll = $(this).scrollTop(); // winodw滚动的高度
var $currentSection; // 当前内容块
$sections.each(function() {
var divPosition = $(this).offset().top; // 获取到当前内容块具体页面顶部的距离
if (divPosition - 1 < currentScroll) { // 通过条件判断匹配到当前滚动内容块
$currentSection = $(this);
}
// 如果楼层最上端有其它的内容快需要加一个判断
if (currentScroll > 300) {
var id = $currentSection.attr('id');
$('.links').removeClass('menu-active');
$("." + id).addClass('menu-active');
}
})
});
</script>
</body>
</html>
