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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 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 UTF8 文件的签名问题
2009/10/30 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
Angular网络请求的封装方法
2018/05/22 Javascript
js实现随机点名程序
2020/09/17 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
python3.3实现乘法表示例
2014/02/07 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
python微信撤回监测代码
2019/04/29 Python
python添加菜单图文讲解
2019/06/04 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
汽车工程专业应届生求职信
2013/10/19 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
大学生作弊检讨书
2014/09/11 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers