<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="jquery.js"></script> <style> *{ padding: 0; margin: 0; list-style: none; } .header{ width: 100Vw; height: 50px; background: gray; } .con{ width: 100vw; overflow: hidden; position: relative; margin: 20px 0 0 0; } .left{ width: 15%; top: 0; left: 50px; border-left: 1px solid #E0E6ED; border-top: 1px solid #E0E6ED; } .positionAbs{ position: absolute; } .left p{ width: 100%; height: 48px; background: #FFF; border-bottom: 1px solid #E0E6ED; border-right: 1px solid #E0E6ED; font-size: 16px; color: #333333; letter-spacing: 1px; line-height: 48px; text-align: center; cursor: pointer; } .left p.check{ background: #04388B; color: #FFFFFF; } .right{ float: right; width: 70%; } .rightCon{ width: 100%; height: 200px; background: pink; color:#fff; font-size: 30px; line-height: 200px; text-align: center; margin: 0 0 20px 0; } .bottom{ width: 100vw; height: 260px; background: #ccc; text-align: center; font-size: 30px; line-height: 260px; } .postionFixed{ position: fixed; } </style> <title>Document</title> </head> <body> <div class="header"> </div> <div class="con"> <div class="left positionAbs"> <p class="check">第一个</p> <p>第二个</p> <p>第三个</p> <p>第四个</p> <p>第五个</p> </div> <div class="right"> <div class="rightCon"> 这是第一个对应的内容 </div> <div class="rightCon"> 这是第二个对应的内容 </div> <div class="rightCon"> 这是第三个对应的内容 </div> <div class="rightCon"> 这是第四个对应的内容 </div> <div class="rightCon"> 这是第五个对应的内容 </div> </div> </div> <div class="bottom"> 底部 </div> <script> //点击左侧导航条跳转到对应到块 $('.left p').click(function(){ var i = $('.left p').index(this); $(this).addClass('check').siblings().removeClass('check'); var h = $('.rightCon').eq(i).offset().top; $(window).scrollTop(h); }) //鼠标滚动的时候自动定位到哪个导航条下 $(window).scroll(function(){ var top = $(window).scrollTop(); var height = $(document).height(); if (top<70) { $('.left').removeClass('postionFixed').addClass('positionAbs'); }else if(top < height-500){ $('.left').removeClass('positionAbs').addClass('postionFixed'); for (var i = 0; i < $('.rightCon').length; i++) { console.log('i',i, $('.rightCon').eq(i).offset().top,top); if (top >= $('.rightCon').eq(i).offset().top) { $('.left p').eq(i).addClass('check').siblings().removeClass('check'); } } }else{ $('.left').removeClass('postionFixed').addClass('positionAbs'); } }) </script> </body> </html>