<!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. Linux内核中常见内存分配函数

    1.      原理说明 Linux内核中采用了一种同时适用于32位和64位系统的内存分页模型,对于32位系统来说,两级页表足够用了,而在x86_64系统中,用到了四级页表,如图2-1所示.四级页表分 ...

  2. AD芯片的基准参考电压问题

    基准参考电压的精度一般非常高的! AD芯片 : AD9226的基准参考电压  误差一般是  千分之一! 我之前用万用表测量AD9226的参考电压大概是1.89V(这款AD的正确参考电压应该是2V),所 ...

  3. Python特殊语法：filter、map、reduce、lambda

    filter(function, sequence):对sequence中的item依次执行function(item),将执行结果为True的item组成一个List/String/Tuple(取决 ...

  4. love 玫瑰花

    <!doctype html> <html> <head> <title>Love</title> <meta charset=&qu ...

  5. CentOS 调用.Net 的Web Service，提示连接超时解决方案

    我是使用axis调用.NET 的Web Service ,在Window下跑没有问题,将项目部署到Linux下,发现Web Service 连接超时,百度了下,发现是因为Linux不能直接跑.Net, ...

  6. bash&nbsp;shell笔记2&nbsp;结构化命令

    二.使用结构化命令 知识内容: # 改变命令流 # 使用if-then逻辑 # 嵌套if-then # 测试条件 # 高级if-then功能 许多程序在脚本命令之间需要某些逻辑控制流,有些命令允许脚本 ...

  7. 《转》我的ARM学习经历

    1.基础阶段     话说06年第一份工作从事的是PLC开发,用protel画原理图和PCB,写AVR单片机程序,焊焊板子,还去过华强北买器件,比较杂,但是接触面比较广,为进一步学ARM打下了基础. ...

  8. 从官网下载jdk1.6 1.7

    Oracle Java Archive | Oracle Technology Network | Oraclehttp://www.oracle.com/technetwork/java/javas ...

  9. 535. Encode and Decode TinyURL 长短URL

    ［抄题］: TinyURL is a URL shortening service where you enter a URL such as https://leetcode.com/problem ...

  10. 690. Employee Importance员工权限重要性

    ［抄题］: You are given a data structure of employee information, which includes the employee's unique i ...