固定メニューのactiveとページの現在地を連動
仕様
メニューと、divの位置を連動する
ソース
html
test_10.htm
<html>
<head>
<link rel="stylesheet" type="text/css" href="test_10.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test_10.js"></script>
<title>test_10 固定メニューのactiveとページの現在地を連動</title>
</head>
<body>
<nav id="menu-wrap">
<ul id="menu">
<li><a href="#content_first">Contents1</a></li>
<li><a href="#content_second">Contents2</a></li>
<li><a href="#content_third">Contents3</a></li>
<li><a href="#content_fourth">Contents4</a></li>
<li><a href="#content_etc">Contents5</a></li>
</ul>
</nav>
<div class="contents" id="content_first">1</div>
<div class="contents" id="content_second">2</div>
<div class="contents" id="content_third">3</div>
<div class="contents" id="content_fourth">4</div>
<div class="contents" id="content_etc">5</div>
</body>
</html>
javascript
※スクロールアニメーションをつけました
test_10.js
$(function() {
var list=[];
['#content_first',
'#content_second',
'#content_third',
'#content_fourth',
'#content_etc'
].map(function(x){
list.push({
"min": $(x).offset().top,
"max": $(x).next().length>0?$(x).next().offset().top-1:($(x).offset().top+$(x).height()),
"id": x,
})});
var pre_pos = 0;
$(function() {
$('#menu a[href="' + location.hash + '"]').addClass('active');
$('#menu a').on('click', function() {
$('#menu a').removeClass('active');
$(this).addClass('active');
$('html,body').animate({scrollTop:$($(this).attr("href")).offset().top }, 500, 'swing');
});
});
$(document).on('scroll', function() {
var this_pos = $(window).scrollTop();
var pre_id = get_id(pre_pos);
var this_id = get_id(this_pos);
if (pre_id !== this_id) {
if(this_id!==null){
location.hash=this_id.substr(1,this_id.length);
$(window).scrollTop(this_pos);
}else{
location.hash="";
};
$('#menu a').removeClass("active");
$('[href="' + this_id + '"]').addClass("active");
}
pre_pos = this_pos;
});
function get_id(pos) {
var arr = list.filter(function(x) {
return x.min <= pos && x.max >= pos;
});
if (typeof arr[0] == "undefined") return null;
return arr[0].id;
}
});
css
test_10.css
#menu-wrap {
position: fixed;
}
#menu{
text-align: left;
display: flex;
margin: 0px;
padding-left: 20px;
}
#menu li {
display:inline;
}
#menu li:last-child a{
border-right:1px solid #000000;
}
#menu a:hover{
background-Color:yellow;
}
#menu a{
width: 80px;
border:1px solid #000000;
border-right:0px;
padding-left: 5px;
padding-right: 5px;
display: inline-block;
text-decoration:none;
}
.contents {
height: 500px;
}
.active {
background-color: red;
}
#content_first,#content_third,#content_etc{background-Color:aqua;}
#content_second,#content_fourth{background-Color:lime;}