jQuery 导航自动跟随滚动的实现代码


Posted in jQuery onMay 30, 2018

具体代码如下所示:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>   
<c:set var="front" value="${frontPath}${pageContext.request.contextPath}/f"/> 
<c:set var="ajaxUrl" value="${frontPath}${pageContext.request.contextPath}"/> 
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"/> 
  <meta name="format-detection" content="telephone=no,email=no,adress=no"/> 
  <meta name="viewport" 
     content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> 
  <meta name="apple-mobile-web-app-capable" content="yes"/> 
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/> 
  <title>simpleNavFollowing</title> 
  <style> 
    * { 
      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; 
    } 
  </style> 
  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 
  <script> 
    $(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); 
      }); 
    }); 
  </script> 
</head> 
<body> 
<div id="nav"> 
  <a href="#page1" rel="external nofollow" class="active">page1</a> 
  <a href="#page2" rel="external nofollow" >page2</a> 
  <a href="#page3" rel="external nofollow" >page3</a> 
  <a href="#page4" rel="external nofollow" >page4</a> 
  <a href="#page5" rel="external nofollow" >page5</a> 
  <a href="#page6" rel="external nofollow" >page6</a> 
  <a href="#page7" rel="external nofollow" >page7</a> 
  <a href="#page8" rel="external nofollow" >page8</a> 
  <a href="#page9" rel="external nofollow" >page9</a> 
  <a href="#page10" rel="external nofollow" >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> 
</body> 
</html>

总结

以上所述是小编给大家介绍的jQuery 导航自动跟随滚动的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jquery实现点击左右按钮切换图片
Jan 27 jQuery
jquery插件实现代码雨特效
Apr 24 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 #jQuery
关于jquery中attr()和prop()方法的区别
May 28 #jQuery
jQuery中将json数据显示到页面表格的方法
May 27 #jQuery
jQuery插件jsonview展示json数据
May 26 #jQuery
jQuery插件Validation表单验证详解
May 26 #jQuery
jQuery创建及操作xml格式数据示例
May 26 #jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 #jQuery
You might like
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
个人站长制做网页常用的php代码
2007/03/03 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
什么是JavaScript
2009/08/13 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
Node 代理访问的实现
2019/09/19 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
python利用platform模块获取系统信息
2020/10/09 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
化工工艺专业求职信
2013/09/22 职场文书
中专毕业生自我鉴定范文
2013/11/09 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
领导新年致辞2016
2015/07/29 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers