CSS javascript 结合实现悬浮固定菜单效果


Posted in Javascript onAugust 23, 2015

效果展示图如下,兼容chrome,firefox,windows,360,搜狗等主流浏览器

CSS javascript 结合实现悬浮固定菜单效果

点击这里下载源码

米扑代理,是由百度,小米出来的工程师创建,做得非常棒,功能很全很贴心。

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 class="wrapper">
    <div class="header">
    </div>
    <div id="nav">
      <a href="http://proxy.mimvp.com">米扑代理</a>
      <a href="http://apptop.mimvp.com">米扑排名</a>
      <a href="http://domain.mimvp.com">米扑域名</a>
      <a href="http://blog.mimvp.com">米扑博客</a>
      <a href="http://forum.mimvp.com">米扑论坛</a>
    </div>
    <div id="content" style="text-align: left;">
       <p>悬浮经典实例请参考:米扑代理</p>
      <p>米扑代理价格表实例: </p>
      <p><a href="http://proxy.mimvp.com/price.php">http://proxy.mimvp.com/price.php</a></p>
       <p>悬浮经典实例请参考: 米扑代理</p>
      <p>米扑代理价格表实例: </p>
      <p><a href="http://proxy.mimvp.com/price.php">http://proxy.mimvp.com/price.php</a></p>
       <p>悬浮经典实例请参考: 米扑代理</p>
      <p>米扑代理价格表实例: </p>
      <p><a href="http://proxy.mimvp.com/price.php">http://proxy.mimvp.com/price.php</a></p>
    </div>
  </div>
</body>
</html>

运行效果:

CSS javascript 结合实现悬浮固定菜单效果

Javascript 相关文章推荐
javascript中[]和{}对象使用介绍
Mar 20 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
原生js实现弹幕效果
Nov 29 Javascript
微信JSSDK上传图片
Aug 23 #Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 #Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 #Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 #Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 #Javascript
javascript中Array()数组函数详解
Aug 23 #Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 #Javascript
You might like
在PHP中执行系统外部命令
2006/10/09 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
jQuery操作cookie
2016/08/08 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
jQuery操作css样式
2017/05/15 jQuery
通过示例彻底搞懂js闭包
2017/08/10 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python批量赋值操作实例
2018/10/22 Python
python版DDOS攻击脚本
2019/06/12 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
联谊活动策划书
2014/01/26 职场文书
小学语文复习计划
2015/01/19 职场文书
Golang 并发编程 SingleFlight模式
2022/04/26 Golang