<!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. WCF服务端返回：（413） Request Entity Too Large

    出现这个原因我们应该都能猜测到,文件传出过大,超出了WCF默认范围,那么我们需要进行修改. 服务端和客户端都需要修改. 第一.客户端: <system.serviceModel> < ...

  2. java中抽象类跟接口的区别

    额,好吧,本来是打算转载些神马的,但是搜资料的过程中发现了一个专注与java的人,那就关注啦,以后多进他blog学习学习:http://www.cnblogs.com/chenssy/p/337670 ...

  3. BugkuCTF 逆向

    Easy_vb 下载文件,打开 用 IDA 或 OD 打开 在中间部分发现 flag 把 MCTF 改成 flag,就是正确的 flag 了 Easy_Re 下载附件,打开

  4. 使用Selenium对付一个点击游戏

    继续来熟悉Selenium的使用,这次来玩一个Html5游戏.原网址在这:http://tianmaying.com/app/clicking/# 游戏是这样的,5秒内你能点击这个按钮几次.一般人都只 ...

  5. JavaScript之BON

    1.windows对象 全局作用域: 2.窗口关系及框架 如果页面包含框架,则每个框架都有自己的window对象,并且保存在iframes集合中,在iframe集合中,可以通过数值索引(从0开始,从左 ...

  6. OCX RegSvr32 error

    [Window Title]RegSvr32 [Content]The module "tt.ocx" failed to load. Make sure the binary i ...

  7. Android 模拟MotionEvent事件 触发输入法

    Android 模拟MotionEvent事件 触发输入法   android输入法layoutbutton文本编辑encoding 关键词:MotionEvent,模拟按键,模拟点击事件,主动弹出输 ...

  8. Python将两个数组合并成一个数组，多维数组变成一维数组

    1.extend方法 c1 = ["Red","Green","Blue"] c2 = ["Orange"," ...

  9. interface vs abstract

    [interface vs abstract] 1.interface中的方法不能用public.abstract修饰,interface中的方法只包括signature. 2.一个类只能继承一个ab ...

  10. 【总结整理】AXURE原件

    iphone:750*1334 一般用分辨率的一半 移动的时候,按住shift拖动,可水平移动 框选的时候,箭头选择包含模式,只要不全部包含进来,就不会被选中 ctrl+'=显示背景网格 ctrl+s ...