側欄導航自動定位效果詳解

admin發表於2017-10-23

分享一段程式碼例項，它實現了側欄定位導航效果。

點選側欄導航可以實現頁面位置定位功能，當拖動滾動條的時候，側欄也能夠自定實現定位效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
html, body, div, ul, li {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
#sideBar {
  width: 50px;
  height: 500px;
  position: fixed;
  left: 200px;
  top: 200px;
}
#sideBar ul li {
  width: 50px;
  height: 50px;
  background: skyblue;
  border: 1px dashed #eee;
  color: #fff;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
#sideBar ul li.cur {
  background: orange;
  color: #37c1e3;
  font-weight: bold;
}
.item {
  width: 70%;
  height: 800px;
  background: #cccccc;
  margin: 0 auto;
  font-size: 150px;
  color: #fff;
  text-align: center;
  border-bottom: 1px solid #37c1e3;
  line-height: 800px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
  function SideBar(opt) {
 
    var self = this;
    this.opt = {
      sidebar: '',
      items: ''
    };
    this.opt = opt;
    this.click_F = false;
    this.proboxTop = [];
    this.opt.sidebar.find('li').eq(0).addClass('cur');
    $.each(self.opt.items, function(index) {
      self.proboxTop[index] = self.opt.items.eq(index).offset().top;
    });
    this.init();
  }
 
  SideBar.prototype = {
    init: function() {
      this.clickTo();
      this.scrollTo();
    },
    clickTo: function() {
      var self = this;
 
      this.opt.sidebar.find('li').click(function() {
        self.click_F = true;
        var index = $(this).index();
        $('html,body').finish().animate({
          scrollTop: self.proboxTop[index]
        }, function() {
          self.click_F = false;
        });
        $(this).addClass('cur').siblings().removeClass('cur');
      });
    },
    scrollTo: function() {
      var self = this;
      this.change($(window).scrollTop());
      $(window).on('scroll', function() {
        if (self.click_F) {
          return;
        }
        self.change($(this).scrollTop());
      });
    },
    change: function(scrollTop) {
      var self = this;
      var el = self.opt.sidebar;
      for (var index = 0; index < self.proboxTop.length - 1; index++) {
        if (self.proboxTop[index] <= scrollTop && self.proboxTop[index + 1] > scrollTop) {
          el.find('li').eq(index).addClass('cur').siblings().removeClass('cur');
        }
      }
      if (self.proboxTop[self.proboxTop.length - 1] <= scrollTop) {
        el.find('li').eq(self.proboxTop.length - 1).addClass('cur').siblings().removeClass('cur');
      }
    }
  }
 
  var scroll = new SideBar({
    sidebar: $('#sideBar'),
    items: $('.item')
  });
});    
</script>
</head>
<body>
  <div id="sideBar">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>fiv</li>
    </ul>
  </div>
  <div class="content">
    <div style="background:pink" class="item">螞蟻部落一</div>
    <div style="background:deepskyblue" class="item">螞蟻部落二</div>
    <div style="background:greenyellow" class="item">螞蟻部落三</div>
    <div style="background:green" class="item">螞蟻部落四</div>
    <div style="background:orange" class="item">螞蟻部落五</div>
  </div>
  <div style="height:1000px;"></div>
</body>
</html>

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

一.程式碼註釋:

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

（2）.function SideBar(opt) {}，用作建構函式，引數是相關的配置引數，後面會介紹。

（3）.var self = this，防止this衝突，因為在不同的上下文中this指向是不同的。

（4）.this.opt = {

  sidebar: '',

  items: ''

}，預設配置引數，sidebar是側欄導航元素；items是右側滑動的塊。

（5）.this.opt = opt，重置配置引數。

（6）.this.click_F = false，用來標識滾動條滾動是否對導航起作用，防止點選左側導航和拖動滾動條衝突。

（7）.this.proboxTop = []，用來儲存滑動塊距離文件頂部的距離。

（8）.this.opt.sidebar.find('li').eq(0).addClass('cur')，將第一個側欄導航設定為黃色。

（9）.$.each(self.opt.items, function(index) {

  self.proboxTop[index] = self.opt.items.eq(index).offset().top;

}),將各個滑塊距離文件頂部的距離存入陣列。

（10）.this.init()，進行初始化操作。

（11）.SideBar.prototype = {}，設定原型物件。

（12）.init: function() {

  this.clickTo();

  this.scrollTo();

}，此方法可以進行一些初始化操作。

（13）.clickTo: function() {}，此方法可以為側欄導航註冊click事件處理函式。

（14）.var self = this,防止this衝突，因為在不同的上下文中this指向是不同的;這裡的this是指向SideBar物件例項。

（15）.var index = $(this).index(),獲取當前點選側欄導航的索引。

（16）.$('html,body').finish().animate({

  scrollTop: self.proboxTop[index]

}, function() {

  self.click_F = false;

}),點選側欄導航，那麼就滑動到對應的塊；

然後就將click_F設定為false。

（17）.$(this).addClass('cur').siblings().removeClass('cur')，將當前側欄導航設定為黃色。

（18）.scrollTo: function() {},此方法主要實現了註冊scroll事件處理函式。

（19）.this.change($(window).scrollTop())，實現側欄導航定位效果。

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

（21）.if (self.click_F) { 

  return;

}，如果為true，說明已經點選了側欄導航，並且滾動動畫還沒完成，那麼就直接跳出；目的是防止點選側欄導航和滾動滾動條衝突。

（22）.self.change($(this).scrollTop())，實現側欄導航定位效果，也就是設定哪個側欄導航為黃色。

二.相關閱讀:

（1）.find()可以參閱jQuery find()一章節。

（2）.eq()可以參閱jQuery eq()一章節。

（3）.addClass()可以參閱jQuery addClass()一章節。

（4）.$.each()可以參閱jQuery.each()一章節。

（5）.offset()可以參閱jQuery offset()一章節。

（6）.prototype可以參閱javascript prototype原型一章節。

（7）.index()可以參閱jQuery index()一章節。

（8）.finish()可以參閱jQuery finish()一章節。

（9）.animate()可以參閱jQuery animate()一章節。

（10）.siblings()可以參閱jQuery siblings()一章節。

（11）.removeClass()可以參閱jQuery removeClass()一章節。

（12）.scrollTop()可以參閱jQuery scrollTop()一章節。

相關文章