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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
使用jQuery实现购物车
Oct 29 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
5.PHP的其他功能
2006/10/09 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
详解PHP PDO简单教程
2019/05/28 PHP
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
python 调用c语言函数的方法
2017/09/29 Python
python实现机器人行走效果
2018/01/29 Python
Django 路由控制的实现代码
2018/11/08 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
小学安全教育材料
2014/02/17 职场文书
宿舍标语大全
2014/06/19 职场文书
自主招生专家推荐信
2015/03/26 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android