側欄能夠定位的導航選單程式碼例項

螞蟻小編發表於2017-04-14

本章節分享一段程式碼例項，它實現了側欄能夠跟隨定位的導航選單效果。

不知道怎麼描述這個導航的功能，直接看程式碼:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
div#ksLeftNav {
  position: fixed;
  width: 220px;
  float: left;
  top: 0;
  font-size: 14px;
}
div#ksLeftNav * {
  margin: 0;
  padding: 0;
}
div#ksLeftNav div#nav-con {
  position: relative;
}
div#ksLeftNav div#nav-con ul.nav {
  margin: 15px;
  position: relative;
  z-index: 2;
}
div#ksLeftNav div#nav-con ul.nav li {
  list-style: none;
}
div#ksLeftNav div#nav-con ul.nav li a.nav-title {
  display: inline-block;
  text-decoration: none;
  color: #333;
  height: 36px;
  line-height: 36px;
  padding-left: 26px;
  font-weight: bold;
}
div#ksLeftNav div#nav-con ul.nav li a.nav-title.active {
  color: #00bfe9;
}
div#ksLeftNav div#nav-con div.nav-detail {
}
 
div#ksLeftNav div#nav-con div.nav-detail a {
  display: block;
  color: #666;
  padding: 5px 15px 5px 40px;
  text-decoration: none;
}
div#ksLeftNav div#nav-con div.nav-detail a.active {
  color: #00bfe9;
}
div#ksLeftNav div#nav-con div.nav-detail a:hover {
  text-decoration: none;
}
div#ksLeftNav div#nav-con div.line {
  position: absolute;
  top: 0;
  left: 23px;
  height: 100%;
  width: 1px;
  border-left: 1px solid #ccc;
}
div#ksLeftNav div#nav-con div.circle-top {
  position: absolute;
  top: -17px;
  left: 17px;
}
div#ksLeftNav div#nav-con div.circle-bottom {
  position: absolute;
  bottom: -17px;
  left: 17px;
}
div.right-con {
  margin-left: 220px;
}
div.right-con div.item {
  padding: 15px;
}
div.right-con div.item h5 {
  font-size: 30px;
}
div.right-con div.item p {
  padding: 15px 0;
  line-height: 25px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
var scrollTagEvent = (function() {
  $(function(){
    var arr = [];
    init();
    function init() {
      $('div#ksLeftNav a.nav-title').each(function(){
        arr.push(parseInt($($(this).attr("href")).offset().top));
      });
      $(document).on('click', 'div#ksLeftNav a', function (e) {
        e.preventDefault();
        unbindScroll();
        $('div#ksLeftNav a').removeClass('active');
        if ($(this).parent().hasClass('nav-detail')) {
          $(this).addClass('active').parent().siblings('a').addClass('active');
        } else {
          $(this).addClass('active');
        }
        $("html,body").animate({
          scrollTop: $($(this).attr("href")).offset().top
        }, 1000, function () {
          bindScroll();
        });
      });
      $('div#ksLeftNav a.nav-title').first().trigger('click');
    }
 
    function bindScroll() {
      $(window).on('scroll.tag', function (e) {
        var scrollT = $(this).scrollTop();
        for (var index = 0; index < arr.length; index++) {
          if (scrollT >= arr[index]) {
            $('a.active').removeClass('active');
            $('div#ksLeftNav a.nav-title:eq(' + index + ')').addClass('active');
          }
        }
      });
    }
    function unbindScroll() {
      $(window).off('scroll.tag');
    }
  });
})();
</script>
</head>
<body>
  <div id="ksLeftNav">
    <div id="nav-con">
      <div class="line"></div>
      <ul class="nav" id="list">
        <li>
          <a href="#item1" class="nav-title">1 發展簡史</a>
          <div class="nav-detail">
            <a href="#item11">1.1 UGC時期</a>
            <a href="#item12">1.2 平臺化</a>
          </div>
        </li>
        <li>
          <a href="#item2" class="nav-title">2 產品功能</a>
          <div class="nav-detail">
            <a href="#item21">2.1 基礎功能</a>
            <a href="#item22">2.2 特色功能</a>
            <a href="#item23">2.3 使用者功能</a>
          </div>
        </li>
        <li>
          <a href="#item3" class="nav-title">3 使用者體系</a>
          <div class="nav-detail">
            <a href="#item31">3.1 積分體系</a>
            <a href="#item32">3.2 使用者團隊</a>
          </div>
        </li>
        <li>
          <a href="#item4" class="nav-title">4 外界評價</a>
        </li>
      </ul>
    </div>
  </div>
 
  <div class="right-con">
    <div class="item" id="item1">
      <h5>發展簡史</h5>
      <div id="item11">
        <h3>UGC時期</h3>
        <p>螞蟻部落歡迎您。</p>
        <p>只有努力奮鬥才會有美好未來。</p>
        <p>沒有人一開始就是高手，必須要通過自己的努力。</p>
        <p>每一天都是新的，要好好的把握。</p>
      </div>
      <div id="item12">
        <h3>平臺化</h3>
        <p>沒有人一開始就是高手，必須要通過自己的努力。</p>
        <p>本站的url地址是softwhy.com。</p>
      </div>
    </div>
    <div class="item" id="item2">
      <h5>產品功能</h5>
      <div id="item21">
        <h3>基礎功能</h3>
        <p>沒有人一開始就是高手，必須要通過自己的努力。</p>
        <p>每一天都是新的，要好好的把握。</p>      </div>
      <div id="item22">
        <h3>特色功能</h3>
        <p>沒有人一開始就是高手，必須要通過自己的努力。</p>
        <p>每一天都是新的，要好好的把握。</p>      </div>
      <div id="item23">
        <h3>使用者功能</h3>
        <p>沒有人一開始就是高手，必須要通過自己的努力。</p>
        <p>每一天都是新的，要好好的把握。</p>      </div>
    </div>
    <div class="item" id="item3">
      <h5>使用者體系</h5>
      <div id="item31">
        <h3>積分體系</h3>
        <p>沒有人一開始就是高手，必須要通過自己的努力。</p>
        <p>每一天都是新的，要好好的把握。</p>      </div>
      <div id="item32">
        <h3>使用者團隊</h3>
        <p>沒有人一開始就是高手，必須要通過自己的努力。</p>
        <p>每一天都是新的，要好好的把握。</p>      </div>
    </div>
    <div class="item" id="item4">
      <h5>外界評價</h5>
      <p>沒有人一開始就是高手，必須要通過自己的努力。</p>
      <p>每一天都是新的，要好好的把握。</p>    </div>
  </div>
</body>
</html>

相關文章