效果展示图如下，兼容chrome，firefox，windows，360，搜狗等主流浏览器
米扑代理，是由百度，小米出来的工程师创建，做得非常棒，功能很全很贴心。
JS + CSS 经典实现
<!DOCTYPE HTML> <html lang="en-US"> <head> <title>悬浮固定菜单</title> <style type="text/css"> .wrapper { width:1000px; height:2000px; margin-left:auto; margin-right:auto; text-align: center; } .header { height:150px; } #nav { padding: 10px; position: relative; top: 0; background: #375069; width: 1000px; } #nav a { display:inline-block; margin:0 10px; *display:inline; color:white; width: 15%; } p a { margin:0 10px; width: 15%; } </style> <script type="text/javascript"> window.onload = function(){ menuFixed('nav'); } function menuFixed(id){ var obj = document.getElementById(id); var objHeight = obj.offsetTop; window.onscroll = function(){ var obj = document.getElementById(id); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop < objHeight){ obj.style.position = 'relative'; }else{ obj.style.position = 'fixed'; } } } </script> </head> <body> <div> <div> </div> <div> <a href="https://proxy.mimvp.com">米扑代理</a> <a href="https://apptop.mimvp.com">米扑排名</a> <a href="https://domain.mimvp.com">米扑域名</a> <a href="https://blog.mimvp.com">米扑博客</a> <a href="https://forum.mimvp.com">米扑论坛</a> </div> <div> <p>悬浮经典实例请参考：米扑代理</p> <p>米扑代理价格表实例： </p> <p><a href="https://proxy.mimvp.com/price.php"></a></p> <p>悬浮经典实例请参考： 米扑代理</p> <p>米扑代理价格表实例： </p> <p><a href="https://proxy.mimvp.com/price.php"></a></p> <p>悬浮经典实例请参考： 米扑代理</p> <p>米扑代理价格表实例： </p> <p><a href="https://proxy.mimvp.com/price.php"></a></p> </div> </div> </body> </html>
运行效果：
您可能感兴趣的文章: