<!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. MFC入门经典

    今天向同学请教了下MFC的入门问题,当真有种"听君一席话,胜读十年书"的感觉.我个人以为每个学习C++控制台类型编程的新手都希望能够把小黑窗变为交互简单的窗口程序,这就促使我们学习 ...

  2. Windows下搭建PHP开发环境-WEB服务器

    PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...

  3. Python中的 set 与 深浅拷贝

    字符串 join() 格式:   "拼接的东西".join(可迭代对象) 可以加列表转换成字符串 lis = ['a','b','c','d'] s = "//" ...

  4. VS2010调用halcon的时候出现试图加载格式不正确的程序(this.hWindowControl1 = new HalconDotNet.HWindowControl();)

    [重要错误修改] /// <summary> /// 设计器支持所需的方法 - 不要 /// 使用代码编辑器修改此方法的内容. /// </summary> private v ...

  5. MySQL备份还原之二使用mysqldump

    1 场景描述: create table gyj_t1(id int,name varchar(10)); insert into gyj_t1 values(1,'AAAAA'); commit; ...

  6. NPOI-WebForm_Excel导入与导出

    本文面对的是第一次 接触NPOI的童鞋 不必为了一些琐碎的事情搞的心情烦躁 废话不多说先上 Demo 的全家福 接下来直接上代码 public partial class _Default : Sys ...

  7. smack 监听不同packet机制

    之前做即时通讯,扒了smack源码来参考.说下其中解包后进行通知的机制. Filter类:accept(Packet packet)函数,传入packet在此函数中进行对比判断,返回true 则通过此 ...

  8. 解决Maximum execution time of 120 seconds exceeded

    在循环开始前加入代码: //设置超时时间 ini_set("max_execution_time",18000); set_time_limit(0); set_time_limi ...

  9. HttpRuntime自定义定时更新缓存

    缓存更新类如下: /// <summary> /// 缓存更新类 /// </summary> /// <typeparam name="T"> ...

  10. Win10 pip安装pycocotools报错解决方法(cl: 命令行 error D8021 :无效的数值参数“/Wno-cpp”)

    参考: https://blog.csdn.net/chixia1785/article/details/80040172 https://blog.csdn.net/gxiaoyaya/articl ...