jquery 导航自动跟随滚动

body:

<div id="nav">
  <a href="#page1" class="active">page1</a>
  <a href="#page2">page2</a>
  <a href="#page3">page3</a>
  <a href="#page4">page4</a>
  <a href="#page5">page5</a>
  <a href="#page6">page6</a>
  <a href="#page7">page7</a>
  <a href="#page8">page8</a>
  <a href="#page9">page9</a>
  <a href="#page10">page10</a>
</div>
<div id="main">
  <div class="mainPage" id="page1">page1</div>
  <div class="mainPage" id="page2" style="height: 400px;">page2</div>
  <div class="mainPage" id="page3">page3</div>
  <div class="mainPage" id="page4">page4</div>
  <div class="mainPage" id="page5" style="height: 300px;">page5</div>
  <div class="mainPage" id="page6">page6</div>
  <div class="mainPage" id="page7">page7</div>
  <div class="mainPage" id="page8">page8</div>
  <div class="mainPage" id="page9" style="height: 900px;">page9</div>
  <div class="mainPage" id="page10">page10</div>
  <div class="mainPage" id="page11" style="height: 900px;">page11</div>
</div>

css:

* {
      margin: 0;
      padding: 0;
    }
    
    html, body {
      position: relative;
      height: 100%;
    }
    
    #nav {
      position: fixed;
      top: 50%;
      left: 20px;
      margin-top: -140px;
      display: inline-block;
      vertical-align: middle;
    }
    
    #nav a{
      display: block;
      position: relative;
      width: 98px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background-color: #eee;
      color: #333;
      border-left: 2px solid transparent;
    }
    #nav a:hover{
      width: 98px;
      border-left: 2px solid #4b59ff;
    }
    #nav a p{
      position: relative;
      z-index: 3;
    }
    #nav a.active{
      background-color: #4b59ff;
      color: #fff;
    }
    #main {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    #main div {
      height: 300px;
      background-color: #efefef;
      border-top: 1px solid #ccc;
    }
    
    #main div:nth-child(2n) {
      background-color: #fafafa;
    }

jQuery:

$(function () {
      var nav = $("#nav");
      var mainPage = $(".mainPage");
      var mainTopArr = new Array();

      for(var i=0;i<mainPage.length;i++){
        var top = mainPage.eq(i).offset().top;
        mainTopArr.push(top);
      }
      $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        var k;
        for(var i=0;i<mainTopArr.length;i++){
          if(scrollTop>=mainTopArr[i]){
            k=i;
          }
        }
        nav.find("a").eq(k).addClass("active").siblings().removeClass("active");
      });
      nav.find("a[href^='#']").click(function(e){
        e.preventDefault();
        $('html, body').animate({scrollTop: $(this.hash).offset().top}, 400);
      });
    });
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,394评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,203评论 0 1
  • 一.什么是jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整...
    love2013阅读 597评论 0 4
  • Learn how Script Tags and Document Ready Work 现在让我们开始学习最流...
    李嫑嫑_fe48阅读 611评论 0 1
  • 文/苏绯浅 美丽的姑娘总是更容易骄傲任性,因为她们习惯了周围人的迁就默许,所以她们变得越来越高傲、狭隘、眼高于 这...
    苏绯浅阅读 589评论 0 0