用jq實現簡單的錨點切換

功能描述

想了半天 還是沒有取好名字，這是一個蠻難形容的效果，不過現在的很多門戶網站都會有這樣的效果。

舉個栗子：

頁面分為四個區域：

 

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

 

知識點概要

 

1.$(window).scroll()

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

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

2.scrollTop()

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

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

3.offset()

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

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

 

功能實現

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

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

 

我的html代碼 布局如下：

指示牌的html代碼為：

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

 

scroll事件代碼如下：

    $(window).scroll(function(){
    About_main.each(function(i){
    //將對應區域距離頁面頭部的距離 保存到一個變量中
    var sss =($(this).offset().top)-200,
    //滾動條已滾動的距離
    winST = $(window).scrollTop(),
    //判斷當前頁面是否處於某個區域中
    inArea = sss < winST && winST <(sss + $(this).height());
    if(inArea){
    //移除所有高亮class
    $(".tab1 li.slt").removeClass("slt")
    //將所有指示牌圖標改為為紅色背景
    $(".tab1 li a").position_y(0)
    //將區域對應的指示牌圖標變為白色背景 並且添加高亮class
    $(".tab1 li").eq(i).addClass("slt").find("a").position_y(-26)
    }
    })
    })

 

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

    $.fn.extend({
    position_x:function(x){
    var _this = $(this)
    _this.each(function(){
    var y = $(this).css("background-position").split('px')[1]
    $(this).css("background-position", x +"px"+ y +"px")
    })
    return _this
    },
    position_y:function(y){
    var _this = $(this)
    _this.each(function(){
    var x = $(this).css("background-position").split('px')[0]
    $(this).css("background-position", x +"px "+ y +"px")
    })
    return _this
    }
    })

 

然后是點擊指示牌的某版塊 可以將頁面滑動到版塊對應的區域：

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

 

具體的功能代碼已經全部貼上，基本上的問題 也在注釋中已經注明，其中 需要特別提一下的是：

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)