Javascript實現(xiàn)頁面滾動時導航智能定位

更新時間：2017年05月06日 10:23:29 作者：wangkun

本篇文章主要介紹了Javascript實現(xiàn)頁面滾動時導航智能定位，具有一定的參考價值，感興趣的小伙伴們可以參考一下

常見的開發(fā)頁面中可能會有這么一個需求，頁面中會有多個模塊，每個模塊對應一個導航，當頁面滾動到某個模塊時，對應的模塊導航需要加上一個類用于區(qū)分當前用戶所瀏覽區(qū)域。

假設結構如下：

<div class="container">
  <div class="wrapper">
    <div class="section" id="section1">section1</div>
    <div class="section" id="section2">section2</div>
    <div class="section" id="section3">section3</div>
    <div class="section" id="section4">section4</div>
    <div class="section" id="section5">section5</div>
  </div>
  <nav>
    <a href="#section1" rel="external nofollow" class="current">section1</a>
    <a href="#section2" rel="external nofollow" >section2</a>
    <a href="#section3" rel="external nofollow" >section3</a>
    <a href="#section4" rel="external nofollow" >section4</a>
    <a href="#section5" rel="external nofollow" >section5</a>
  </nav>
</div>

頁面滾動時導航定位

js代碼如下：

var $navs = $('nav a'),          // 導航
  $sections = $('.section'),       // 模塊
  $window = $(window),
  navLength = $navs.length - 1;
  
$window.on('scroll', function() {
  var scrollTop = $window.scrollTop(),
    len = navLength;

  for (; len > -1; len--) {
    var that = $sections.eq(len);
    if (scrollTop >= that.offset().top) {
       $navs.removeClass('current').eq(len).addClass('current');
       break;
    }
  }
});

效果如下：

不難看出，基本原理就是在window滾動的時候，依次將模塊從后向前遍歷，如果window的滾動高度大于或等于當前模塊的距頁面頂部的距離，則將當前模塊對應的導航突出顯示，并且不再繼續(xù)遍歷

點擊導航定位頁面

除了這種需求外，還有另一種需求，就是點擊導航定位到導航所對應模塊的頂部。

代碼如下：

$navs.on('click', function(e) {
  e.preventDefault();
  $('html, body').animate({
    'scrollTop': $($(this).attr('href')).offset().top
  }, 400);
});

效果如下：

以上基本上滿足了業(yè)務的基本需求，這是工作中總結的經(jīng)驗，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js 實現(xiàn)碰撞檢測的示例
這篇文章主要介紹了js 實現(xiàn)碰撞檢測的示例，幫助大家更好的制作js特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下
2020-10-10
opencv 識別微信登錄驗證滑動塊位置
這篇文章主要介紹了opencv 識別微信登錄驗證滑動塊位置及各自的優(yōu)缺點,需要的朋友可以參考下
2018-08-08
JavaScript實現(xiàn)簡潔的俄羅斯方塊完整實例
這篇文章主要介紹了JavaScript實現(xiàn)簡潔的俄羅斯方塊,以完整實例形式分析了JavaScript實現(xiàn)俄羅斯方塊游戲的具體技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下
2016-03-03
微信小程序實現(xiàn)簡單彈框效果
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)簡單彈框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
JS出現(xiàn)失效的情況總結
本篇文章主要對JS出現(xiàn)失效的情況進行總結。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
Bootstrap Tree View簡單而優(yōu)雅的樹結構組件實例解析
本文通過實例代碼給大家介紹了Bootstrap Tree View簡單而優(yōu)雅的樹結構組件,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-06-06
JS ES6中setTimeout函數(shù)的執(zhí)行上下文示例
這篇文章主要給大家介紹了關于JS ES6中setTimeout函數(shù)的執(zhí)行上下文的相關資料，文中給出了詳細的介紹和示例代碼供大家參考學習，需要的朋友們下面來一起看看吧。
2017-04-04
BootStrap中的表單大全
這篇文章主要介紹了BootStrap中的表單大全,包括基礎表單，內聯(lián)表單和水平表單等知識，本文介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下
2016-09-09
JavaScript獲取瀏覽器窗口尺寸的幾種方法
JavaScript是一種廣泛使用的腳本語言,用于開發(fā)網(wǎng)頁和應用程序,在Web開發(fā)中,經(jīng)常需要獲取瀏覽器窗口的尺寸,以便根據(jù)窗口大小進行布局或執(zhí)行其他操作,本文將介紹如何使用JavaScript來獲取瀏覽器窗口尺寸,需要的朋友可以參考下
2023-11-11
JS中offset和勻速動畫詳解
這篇文章主要介紹了JavaScript動畫：offset和勻速動畫詳解(含輪播圖的實現(xiàn))，并把實現(xiàn)代碼做了分享，有興趣的朋友參考下。
2018-02-02