用jq實現簡單的錨點切換

功能描述

想了半天 仍是沒有取好名字，這是一個蠻難形容的效果，不過如今的不少門戶網站都會有這樣的效果。

舉個栗子：

頁面分爲四個區域：

 

當瀏覽到頁面的相應區域時，這塊指示牌上的對應版塊高亮顯示。而且點擊指示牌上的對應版塊，也能夠將頁面滑動到指定的區域。

 

知識點概要

 

1.$(window).scroll()

         當用戶滾動指定的元素時，會發生 scroll 事件。 scroll 事件適用於全部可滾動的元素和 window 對象（這裏主要監聽瀏覽器窗口）。

   scroll() 方法觸發 scroll 事件，或規定當發生 scroll 事件時運行的函數。

2.scrollTop()

          scrollTop() 方法返回或設置匹配元素的滾動條的垂直位置。 scroll top offset 指的是滾動條相對於其頂部的偏移。

    若是該方法未設置參數，則返回以像素計的相對滾動條頂部的偏移。

3.offset()

          offset() 方法返回或設置匹配元素相對於文檔的偏移（位置）。 返回第一個匹配元素的偏移座標。

    該方法返回的對象包含兩個整型屬性：top 和 left，以像素計。此方法只對可見元素有效。

 

功能實現

    首先咱們須要將頁面上的區域對應的DOM塊插入一個數組中，方便獲取每塊區域在頁面中的位置。

1     var top_Arr =[];
2     varAbout_main= $(".About_main")
3     //將所需的區域對應的Class插入jq選擇器隊列中，並經過each遍歷到數組中
4     $(".About_main,.About_main1").each(function(){
5     top_Arr.push($(this))
6     })

 

個人html代碼 佈局以下：

指示牌的html代碼爲：

 1     <divclass="About_nav">
 2     <divclass="tab1">
 3     <ul>
 4     <liclass="slt"><imgclass="sanjiao"style="bottom:0; left:78px;"src="images/sanjiao.png"/><astyle="background-position:18px-26px;">公司簡介</a></li>
 5     <li><imgclass="sanjiao"style="bottom:0; left:261px;"src="images/sanjiao.png"/><astyle="background-position:-32px0;">發展歷程</a></li>
 6     <li><imgclass="sanjiao"style="bottom:0; left:444px;"src="images/sanjiao.png"/><astyle="background-position:-136px0;">團隊風采</a></li>
 7     <li><imgclass="sanjiao"style="bottom:0; left:627px;"src="images/sanjiao.png"/><astyle="background-position:-80px0;">領導關懷</a></li>
 8     </ul>
 9     </div>
10     </div>

 

scroll事件代碼以下：

 1     $(window).scroll(function(){
 2     About_main.each(function(i){
 3     //將對應區域距離頁面頭部的距離 保存到一個變量中
 4     var sss =($(this).offset().top)-200,
 5     //滾動條已滾動的距離
 6     winST = $(window).scrollTop(),
 7     //判斷當前頁面是否處於某個區域中
 8     inArea = sss < winST && winST <(sss + $(this).height());
 9     if(inArea){
10     //移除全部高亮class
11     $(".tab1 li.slt").removeClass("slt")
12     //將全部指示牌圖標改成爲紅色背景
13     $(".tab1 li a").position_y(0)
14     //將區域對應的指示牌圖標變爲白色背景 而且添加高亮class
15     $(".tab1 li").eq(i).addClass("slt").find("a").position_y(-26)
16     }
17     })
18     })

 

代碼中的position_y爲修改background-position的對應y軸的值：

 1     $.fn.extend({
 2     position_x:function(x){
 3     var _this = $(this)
 4     _this.each(function(){
 5     var y = $(this).css("background-position").split('px')[1]
 6     $(this).css("background-position", x +"px"+ y +"px")
 7     })
 8     return _this
 9     },
10     position_y:function(y){
11     var _this = $(this)
12     _this.each(function(){
13     var x = $(this).css("background-position").split('px')[0]
14     $(this).css("background-position", x +"px "+ y +"px")
15     })
16     return _this
17     }
18     })

 

而後是點擊指示牌的某版塊 能夠將頁面滑動到版塊對應的區域：

1     $(".tab1 li").click(function(){
2     var index = $(this).index()
3     $('body,html').animate({ scrollTop: top_Arr[index].offset().top -100},800);
4     })

 

具體的功能代碼已經所有貼上，基本上的問題 也在註釋中已經註明，其中 須要特別提一下的是：

1. sss = ( $ ( this ). offset (). top ) - 200

    這裏爲何要-200？由於我這裏的指示牌是fixed定位在頁面的頂部，若是沒有這200像素的偏移，將會致使指示牌遮擋住區域的內容。

2. inArea = sss < winST && winST < ( sss + $ ( this ). height ());

   貼個圖片更形象一點（畫的有點難看，各位看官意思下看得懂就行。。），下圖所示對應的 sss和winST都是指什麼。

這塊代碼的意思就是 當頁面處於區域範圍之中時，返回true。sss是區域塊到頁面頂部的距離，假如 sss < winST  說明當前看得見的頁面處於這個區域的上邊框的下方。 winST < ( sss + $ ( this ). height ()) 指的是看得見的部分處於對應區域的下邊框的上方。然而知足這兩個條件就能夠說明，當前的可視區域處於對應的區域範圍中。

 

總結

    這段功能的實現 並非有多麼高的技術含量，是很基本的方法的運用。貼出來也是爲一些想實現該效果，可是心中沒有頭緒，只能找另外的插件來實現的前端道友看看的，請大神看到這段代碼，留下寶貴的意見 由於代碼仍是存在不少問題或者須要優化。

 

 

 

 

 

 

 

來自爲知筆記(Wiz)