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 表单之间的数据传递代码
Dec 04 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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
PHP4中实现动态代理
2006/10/09 PHP
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
获取URL文件名后缀
2013/10/24 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
微信跳一跳python代码实现
2018/01/05 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
python中有函数重载吗
2020/05/28 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
请说出几个常用的异常类
2013/01/08 面试题
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
博士生入学考试推荐信
2013/11/17 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
作文批改评语
2014/12/25 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android