Help us understand the problem. What is going on with this article?

固定メニューの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;}
yambejp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした