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的caller,callee,call,apply
Apr 28 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
uni-app从安装到卸载的入门教程
May 15 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
微信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/07/07 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
JS无限树状列表实现代码
2011/01/11 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
vue.js 上传图片实例代码
2017/06/22 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
基于python select.select模块通信的实例讲解
2017/09/21 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python可视化实现代码
2019/01/15 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
白酒业务员岗位职责
2013/12/27 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
出国英文推荐信
2014/05/10 职场文书
工厂搬迁方案
2014/05/11 职场文书
公司任命书范本
2014/06/04 职场文书