<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

    <style type="text/css">

    * {

        margin: 0;

        padding: 0;

    }

    a{ text-decoration: none; color: #333; height: 35px; line-height: 35px; }

    .section {

        height: 500px;

        border-bottom: 1px solid red;

    }

    nav {

        position: fixed;

        right: 10px;

        top: 50%;

        transform: translateY(-50%);

    }

    nav a {

        display: block;

    }

    .current{ color: red; }

    </style>

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

</head>

<body>

    <div class="container">

        <div class="wrapper">

            <div class="section" id="section1">section1</div>

            <div class="section" id="section2">section2</div>

            <div class="section" id="section3">section3</div>

            <div class="section" id="section4">section4</div>

            <div class="section" id="section5">section5</div>

        </div>

        <nav>

            <a href="#section1" rel="external nofollow" class="current">section1</a>

            <a href="#section2" rel="external nofollow">section2</a>

            <a href="#section3" rel="external nofollow">section3</a>

            <a href="#section4" rel="external nofollow">section4</a>

            <a href="#section5" rel="external nofollow">section5</a>

        </nav>

    </div>

    <script type="text/javascript">

    $(function() {

        var $navs = $('nav a'), // 导航

            $sections = $('.section'), // 模块

            $window = $(window),

            navLength = $navs.length - 1;

            console.log(navLength)

        $window.on('scroll', function() {

            var scrollTop = $window.scrollTop(),

                len = navLength;

            for (; len > -1; len--) {

                var that = $sections.eq(len);

                if (scrollTop >= that.offset().top) {

                    $navs.removeClass('current').eq(len).addClass('current');

                    break;

                }

            }

        });

    })

    </script>

</body>

</html>

效果图：

jQuery定位导航滚动3的更多相关文章

  1. JavaScript定位导航滚动2

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. jquery.nav.js定位导航滚动插件

    jQuery.nav.js插件代码: /* * jQuery One Page Nav Plugin * http://github.com/davist11/jQuery-One-Page-Nav ...

  3. JQuery和原生JavaScript实现网页定位导航特效

    慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...

  4. jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...

  5. jQuery 顶部导航尾随滚动，固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  6. jQuery实现网页定位导航

    代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title ...

  7. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  8. vue2.0模拟锚点实现定位平滑滚动

    vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...

  9. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

随机推荐

  1. 使用PreparedStatement接口实现增删改操作

    直接上下代码: package com.learn.jdbc.chap04.sec02; import java.sql.Connection; import java.sql.PreparedSta ...

  2. 关于Bootstrap的整理和理解

    随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验.作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现 ...

  3. Objective-C入门&nbsp;简介Cocoa框架

    Cocoa Framework简称Cocoa,它是Mac OS X上的快速应用程序开发(RAD, Rapid Application Development)框架,一个高度面向对象的(Object O ...

  4. 【原创】4. MYSQL++ 之 SQLTypeAdapter类型、SQLQueryParms类型 与 SQLBuffer

    1. mysqlpp::SQLBuffer 该类型其实就是SQLTypeAdapter传入的各种类型(int, string, double, long, String, …) 的包装,包装的结果就是 ...

  5. 04-nginx日志管理

    做了几年PHP,老板.经理没说让我管过日志这东西.一般牵涉到日志运维这主要是运维的工作.但是这一章节主要是以拔高性质为主.分析日志的管理方式.PHP程序员不能光靠PHP成为高手,PHP不就if els ...

  6. ArcGIS JS API实现的距离测量与面积量算

    转自https://www.cnblogs.com/deliciousExtra/p/5490937.html

  7. 固本培元之三：Convert、运算符、流程控制语句、ref/out/in三种参数类型

    一.Convert类常用的类型转换方法Convert.ToInt32() 转换为整型(int)Convert.ToChar() 转换为字符型(char)Convert.ToString() 转换为字符 ...

  8. WebFlux02 SpringBoot WebFlux项目骨架搭建

    1 环境搭建 1.1 版本说明 jdk -> 1.8 maven -3.5 springboot -> 2.0.3 开发工具 -> IDEA 1.2 创建项目 利用 IDEA 或者 ...

  9. caret 分类回归树 用法

    http://topepo.github.io/caret/feature-selection-overview.html

  10. 数据库 MySQL 之 表操作、存储引擎

    数据库 MySQL 之 表操作.存储引擎 浏览目录 创建(复制) 删除 修改 查询 存储引擎介绍 一.创建(复制) 1.语法: 1 2 3 4 5 CREATE TABLE 表名(     字段名1 ...