<!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>
效果图：
