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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
javascript实现密码验证
2015/11/10 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
Python hashlib模块加密过程解析
2019/11/05 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
露营世界:Camping World
2017/02/02 全球购物
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
工作的心得体会
2013/12/31 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python