拖動滾動條實現側欄導航定位效果

admin發表於2017-10-31

大家可能看到過這樣的導航效果，那就是拖動滾動條的時候，能夠實現側欄導航定位效果。

也就是說沒到滾動條移動到一個欄目位置，那麼側欄導航也能夠實現定位，下面就通過程式碼例項詳細介紹一下如何實現此功能，需要的朋友可以做一下參考，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
body, html {
  background-color: #f6f6f6;
}
div {
  height: 600px;
  line-height: 500px;
  border: solid 1px #ccc;
  background-color: #fff;
  text-align: center;
}
ul {
  position: fixed;
  height: 40px;
  line-height: 40px;
  top: 100px;
}
li {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border: solid 1px #ccc;
}
li:hover {
  background-color: #ccc;
  color: #fff;
}
li.active {
  background-color: #cc5;
  color: #fff;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  $('li').on('click', function () {
    var index = $(this).index();
    var scrollTo = $('.content').eq(index).offset().top;
    $('body').animate({
      scrollTop: scrollTo
    }, 200);
 
    $(this).addClass('active').siblings().removeClass('active');
  })
 
  var barItemTops = [];
  $('li').each(function (index, element) {
    barItemTops.push($(this).position().top + 100);
  })
  console.log(barItemTops)
  $(window).on('scroll', function () {
    var winScrollTop = $(this).scrollTop();
    $('.content').each(function (index, element) {
      var selfOffsetTop = $(this).offset().top;
      if (0 <= selfOffsetTop - winScrollTop && selfOffsetTop - winScrollTop < barItemTops[index]) {
        $('li').eq(index).addClass('active').siblings().removeClass('active');
      }
    })
  })
})
</script>
</head>
<body>
<ul class="nav">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<div class="content div1">螞蟻部落一</div>
<div class="content div2">螞蟻部落二</div>
<div class="content div3">螞蟻部落三</div>
<div class="content div4">螞蟻部落四</div>
<div class="content div5">螞蟻部落五</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.左側導航條固定效果是由如下程式碼實現的:

[CSS] 純文字檢視 複製程式碼
ul {
  position: fixed;
  height: 40px;
  line-height: 40px;
  top: 100px;
}

top值等於100px要特別注意一下，因為後面會用到。

（2）.滑鼠懸浮導航欄目實現變色效果是由如下程式碼實現的:

[CSS] 純文字檢視 複製程式碼
ul {
  position: fixed;
  height: 40px;
  line-height: 40px;
  top: 100px;
}

（3）.$(function () {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（4）.$('li').on('click', function () {})，為li元素註冊時間處理函式，當點選li元素的時候也能夠實現導航效果。

（5）.var index = $(this).index()，獲取當前點選li元素的索引值。

（6）.var scrollTo = $('.content').eq(index).offset().top，獲取對應索引的div元素距離文件頂端的距離。

（7）.$('body').animate({  scrollTop: scrollTo

}, 200)，以動畫方式設定body的scrollTop值，這樣就會使對應索引的div塊頂端到達視窗頂端。

（8）.$(this).addClass('active').siblings().removeClass('active')，為當前元素新增名稱為active的樣式類，其他的li元素則刪除它，於是就實現了當前li元素呈現綠色的效果。

（9）.var barItemTops = []，宣告一個陣列，後面會用到。

（10）.$('li').each(function (index, element) {  

  barItemTops.push($(this).position().top + 100);

})，獲取每一個li元素的position().top值，再加上100，恰好是每一個li元素頂端，距離視窗頂端的尺寸。

（11）.$(window).on('scroll', function () {})，為window註冊scroll事件處理函式。

（12）.var winScrollTop = $(this).scrollTop()，網頁向上滾動的尺寸。

（13）.$('.content').each(function (index, element) {})，遍歷每一個div元素。

（14）.var selfOffsetTop = $(this).offset().top，獲取div元素距離文件頂部的距離。

（15）.if (0 <= selfOffsetTop - winScrollTop && selfOffsetTop - winScrollTop < barItemTops[index]) {

  $('li').eq(index).addClass('active').siblings().removeClass('active');

}，selfOffsetTop - winScrollTop值就是div元素的頂端距離視窗頂端的尺寸。

也就是如果這個尺寸大0並且小於側邊欄導航對應的li元素頂端距離視窗頂端的距離，那麼將設定對應li元素的相關樣式。

相關文章