<!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. 动态代理AOP实现方法过滤

    上一节实现了动态代理,接下来 有时候,我不需要在每一个方法都要记录日志,做权限验证 等等. 所有就有了这样的需求.AOP实现特定方法过滤,有选择性的来对方法实现AOP 拦截.就是本节标题所示. 举个例 ...

  2. AJAX流程 代码

    var xml =      window.XMLHttpRequest ?new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHT ...

  3. Lambda表达式中使用正则表达式

    某语句如果不用正则表达式: string[] names = { "Tom", "Dick", "Harry", "Mary&qu ...

  4. Cygwin windows10上安装出现系列问题及解决方法

    问题1描述: 发现vim不好使,Backspace键只是前移,不能删除,按方向键更是按出ABCD来.   解决方法: $ cp /usr/share/vim/vim73/vimrc_example.v ...

  5. stm32中断 抢占优先级 和 响应优先级 有什么区别

    与51不同,stm32的中断分类更灵活.51只是按先后顺序大小排列互相打断. stm32中多了响应优先级这一概念. stm32的中断分为 1.抢占(占先)优先级. 2.响应优先级. 1.抢占优先级.抢 ...

  6. 把jpg文件读取到内存char* 再转换成CImage

    网络上找到大神写的转换方法,不过就记下来,学习学习: 当然转成CImage之后就可以从CImage转换成HBITMAP 了 void DrawPic(CDC *pDC,char *buf,int le ...

  7. idea将项目导出为war包

    idea 那么好用,早就把eclipse抛弃了.不过每次都是在给项目发包的时候,不得不重新打开eclipse导出为war包.感觉自己蠢蠢的.上网查了一下教程,按照网上的教程设置好了之后,运行项目发现并 ...

  8. 迷你MVVM框架 avalonjs 0.99发布

    在本版本主要是性能优化,添加一些有用的功能(如回调什么的),离成品阶段不远了. 修正 updateViewModel bug 修正监控数组的set方法 bug 添加data-each-rendered ...

  9. 用Python+Django在Eclipse环境下开发web网站

    一.创建一个项目如果这是你第一次使用Django,那么你必须进行一些初始设置.也就是通过自动生成代码来建立一个Django项目--一个Django项目的设置集,包含了数据库配置.Django详细选项设 ...

  10. laravel 队列

    php artisan  queue:table 先创建job 队列表 php artisan migrate 执行表 php artisan make:job SendMessage 创建一个job ...