JQuery固定导航栏案例

技术2022-07-11 115

演示图

代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery固定导航栏案例2</title> <script src="js/jquery-3.5.1.min.js"></script> <script> $(function () { /*滚动条事件*/ $(window).scroll(function () { var nav_Left=$(".nav").offset().left; /*获取初始的left值*/ /*判断向上卷出去的距离是否大于等于 head的div高度*/ if($(document).scrollTop()>=$(".head").height()){ /*使导航栏脱离文档流*/ $(".nav").css({ position:"fixed", //绝对定位相对于浏览器窗口 top:0, left:nav_Left, zIndex:10 }); }else{ $(".nav").css({ position:"static", //恢复默认值没有定位 }); } }); }); </script> <style> *{ margin: 0; padding: 0; } body{ background-color: black; } .head{ /*头部*/ position: relative; margin: auto; width: 800px; height: 145px; background-color: blanchedalmond; } .nav{ /*导航栏*/ position: relative; margin: auto; width: 800px; height: 45px; background-color: #c8f8ff; } .bd{ /*身体*/ position: relative; margin: auto; width: 800px; height: 1500px; background-image: linear-gradient(#e66465, #9198e5); /*渐变色背景*/ } </style> </head> <body> <div class="head"> <p>这里是头部</p> </div> <div class="nav"> <p>这里是导航栏</p> </div> <div class="bd"> <p>这里是身体</p> </div> </body> </html>

Processed: 0.011, SQL: 9