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使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
15种PHP Encoder的比较
2007/04/17 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
Javascript计算时间差的函数分享
2011/07/04 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
Django高级编程之自定义Field实现多语言
2019/07/02 Python
Python生成词云的实现代码
2020/01/14 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
茶叶生产计划书
2014/01/10 职场文书
消防安全汇报材料
2014/02/08 职场文书
公司合作意向书
2014/04/01 职场文书
企业标语口号
2014/06/10 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
2015年党性分析材料
2014/12/19 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
党小组鉴定意见
2015/06/02 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
Django路由层如何获取正确的url
2021/07/15 Python
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js