基于JQuery实现电梯导航特效+页面滚动一定高度后固定头部导航.zip
资源内容介绍
资源介绍：这段代码实现了两个功能：1，页面滚动一定高度后，头部导航一部分固定在页面顶端。2.垂直电梯导航。这两个效果再制作网站时经常被用到。资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、使用JQ框架。适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。提示：------------------------------------------------------------------------------------------------------------文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。 <!DOCTYPE html><html lang="en"><script src="jquery-3.6.3.min.js"></script><head> <meta charset="utf-8" /> <title>基于JQuery实现电梯导航特效+页面滚动一定高度后固定头部导航</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: 'microsoft yahei'; } .header{ background:#CCCC00; height:100px; line-height:100px; color:#ffffff; text-align:center; font-size:40px; font-weight: 700; } .nav{ background:#000000; height:100px; line-height:100px; color:#ffffff; text-align:center; font-size:40px; font-weight: 700; } .fixedNav{ position:fixed; top:0px; left:0px; width:100%; z-index:100000; _position:absolute; _top:expression(eval(document.documentElement.scrollTop)); } #left_nav { width: 80px; position: fixed; bottom: 60px; right: 5%; display: none; border-radius: 10px; overflow: hidden; background: #eaeaea; box-shadow: 0 0px 15px 0 rgba(50, 50, 50, 0.2); } #left_nav ul li { padding: 15px; width: 100%; height: auto; list-style: none; font-size: 12px; text-align: center; position: relative; cursor: pointer; padding: 10px 0; background: #eaeaea; color: #c00; margin-bottom: 1px; } #left_nav ul li.last { background: #444; color: #fff; margin-bottom: 0px; } #left_nav ul li.active{ background: #ff4d4d; color: #fff; display: block; } #left_nav ul li:hover{ background: #ff3333; color: #fff; display: block; } #header { width: 100vw; height: 100vh; background: #33d6ff; margin: 0 auto; font-size: 50px; line-height: 100vh; text-align: center; color: #fff; font-weight: 700; } #main { width: 100vw; background: #66ff66; margin: 0 auto; } #main .son_wrap { width: 100vw; height: 100vh; font-size: 50px; color: #fff; font-weight: bold; text-align: center; line-height: 100vh; } #footer { width: 100vw; height: 400px; background: #4c331a; margin: 0 auto; line-height: 400px; text-align: center; color: #fff; font-size: 50px; font-weight: 700; } </style></head><body> <div class="header">滚走的头部</div> <div class="nav">固定的导航</div> <div id="left_nav"> <ul> <li class="active">好物推荐</li> <li>服饰美妆</li> <li>电脑数码</li> <li>运动健身</li> <li>美食到家</li> <li>时尚居家</li> <li>母婴玩具</li> <li>虚拟产品</li> <li>越享生活</li> <li class="last">顶部</li> </ul> </div> <div id="header"> 这是一个超长的页面，向下滚动鼠标查看效果 </div> <div id="main"> <div class="son_wrap" style="background: #ff8000;"> 好物推荐 </div> <div class="son_wrap" style="background: #ffcce6;"> 服饰美妆 </div> <div class="son_wrap" style="background: #ccff33;"> 电脑数码 </div> <div class="son_wrap" style="background: #006633;"> 运动健身 </div> <div class="son_wrap" style="background: #ff9999;"> 美食到家 </div> <div class="son_wrap" style="background: #ff6600;"> 时尚居家 </div> <div class="son_wrap" style="background: #6666cc;"> 母婴玩具 </div> <div class="son_wrap" style="background: #c2c2d6;"> 虚拟产品 </div> <div class="son_wrap" style="background: #ff00cc;"> 越享生活 </div> </div> <div id="footer"> 网站底部 </div> <script> $(function () { $(window).on('scroll', function () { var $scroll = $(this).scrollTop(); // 显示楼层标签 if ($scroll >= 500) { $('#left_nav').show(); } else { $('#left_nav').hide(); } // 拖动滚轮，点亮对应的楼层标签 $('.son_wrap').each(function () { var $son_wraptop = $('.son_wrap').eq($(this).index()).offset().top + 400; // 楼层的top大于滚动条的距离 if ($son_wraptop > $scroll) { $('#left_nav li').removeClass('active'); $('#left_nav li').eq($(this).index()).addClass('active'); // 中断循环 return false; } }); }); // 获取每个楼梯的offset().top,点击楼层让对应的内容模块移动到对应的位置 var $son_wrapli = $('#left_nav li').not('.last'); $son_wrapli.on('click', function () { $(this).addClass('active').siblings('li').removeClass('active'); var $son_wraptop = $('.son_wrap').eq($(this).index()).offset().top; // 获取每个楼梯的offsetTop值 // $('html,body')兼容问题body属于chrome $('html,body').animate({ scrollTop: $son_wraptop }) }); // 回到顶部 $('.last').on('click', function () { // $('html,body')兼容问题body属于chrome $('html,body').animate({ scrollTop: 0 }) }); }) </script> <script> $(function(){ $(window).scroll(function() { if($(window).scrollTop()>=100){ // 根据实际情况，调整具体高度 $(".nav").addClass("fixedNav"); // 给nav类名所在的div增加 fixedNav 类名，让它变成fixed固定 }else{ $(".nav").removeClass("fixedNav"); } }); }); </script></body></html>