45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:javascript结合CSS去实现悬浮菜单特效实例分享

javascript结合CSS去实现悬浮菜单特效实例分享

2015-09-16 20:32:56 来源:www.45fan.com 【

javascript结合CSS去实现悬浮菜单特效实例分享

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

javascript结合CSS去实现悬浮菜单特效实例分享

点击这里下载源码

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

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>

运行效果:

javascript结合CSS去实现悬浮菜单特效实例分享


本文地址:http://www.45fan.com/bcdm/21310.html
Tags: JavaScript 结合 css
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部