固定导航条效果开发,先看看看效果:
文章源自陈学虎-https://chenxuehu.com/article/2018/11/7354.html
简要脚本文章源自陈学虎-https://chenxuehu.com/article/2018/11/7354.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定导航条效果开发</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <style type="text/css"> *{padding: 0;margin: 0;} div{width: 960px;margin:0 auto;} #menu.fixtop{position: fixed;margin-left: -480px;left: 50%;top:0;} </style> </head> <body> <script type="text/javascript"> $(window).scroll(function(){ $(document).scrollTop() > 130 ? $("#menu").addClass('fixtop') : $("#menu").removeClass('fixtop') ; }) </script> <div style="height: 100px;background: purple"></div> <div id="menu" style="height: 30px;background: #fcc"></div> <div style="height: 1200px;background: linear-gradient(orange, green, blue);"></div> </body> </html>
文章源自陈学虎-https://chenxuehu.com/article/2018/11/7354.html 文章源自陈学虎-https://chenxuehu.com/article/2018/11/7354.html
评论