CSS javascript 结合实现悬浮固定菜单效果
更新时间：2015年08月23日 14:54:15 投稿：mrr
本篇文章给大家介绍基于CSS javascript 结合实现悬浮固定菜单效果，附有源码下载，需要的朋友可以参考下
效果展示图如下，兼容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 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>
运行效果：
相关文章
这篇文章主要介绍了一个获取第n个元素节点的js函数,功能还不完善 ，需要的朋友可以参考下2014-09-09
这篇文章主要介绍了javascript页面渲染速度测试脚本,计算浏览器渲染HTML页面所需要的时间,需要的朋友可以参考下2014-04-04
javascript设计模式 – 组合模式原理与应用实例分析
这篇文章主要介绍了javascript设计模式 – 组合模式,结合实例形式分析了javascript组合模式相关概念、原理、应用场景及相关使用注意事项,需要的朋友可以参考下2020-04-04
javascript跨域总结之window.name实现的跨域数据传输
本文给大家介绍window.name实现的跨域数据传输，自己亲自实践了一下，真的非常好用，特此分享到脚本之家网站供大家参考2015-11-11
中秋博饼习俗源于福建厦门，盛行于漳州的龙海、泉州的安海和金门县等地。博饼的游戏规则简单公平，既充满竞争悬念，又富于生活情趣，本文将用JavaScript实现这一经典游戏，感兴趣的可以了解一下2022-09-09
jQuery是基于JavaScript的一种框架。jQuery封装js和Ajax的功能，提供函数接口，简化js的操作。使用jquery来显示或者隐藏div真的很方便。2023-02-02
JavaScript创建命名空间(namespace)的最简实现
JavaScript创建命名空间(namespace)通过自定义函数进行类型判断、数组遍历、函数执行等相关操作来实现命名空间的功能,需要的朋友可以参考一下2007-12-12
这篇文章主要介绍了JS实现方向键切换输入框焦点的方法,涉及javascript鼠标事件及页面元素焦点的切换实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
关于JS性能优化中的冰山一角：事件代理、警惕闭包。其实本文有一个文章已经说到，闭包如何产生，闭包的作用；2011-01-01
这篇文章主要介绍了在js中如何准确的判断一个变量的类型，文中代码非常详细，帮助大家更好的学习，有兴趣的朋友可以了解下2020-06-06
最新评论