CSS
JavaScript
jQuery

固定メニューのactiveとページの現在地を連動

More than 1 year has passed since last update.

固定メニューの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;}