CSS javascript 结合实现悬浮固定菜单效果

效果展示图如下,兼容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 结合实现悬浮固定菜单效果

时间: 2015-08-22

javascript简单实现滑动菜单效果的方法

本文实例讲述了javascript简单实现滑动菜单效果的方法.分享给大家供大家参考.具体如下: 整个javascript代码共42行,其中主要函数Slide代码26行,可以改进哦! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

javascript实现在下拉列表中显示多级树形菜单的方法

本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法.分享给大家供大家参考.具体如下: 这里演示在下拉列表框中显示分级的菜单,在很多网站都可以看到的效果,很实用,下拉列表框中的选项是利用JS控制输出,如果你有更好的办法不用JS来显示,那最好了,因为像这种菜单用JS来实现,多多少少有点麻烦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

JavaScript实现级联菜单的方法

本文实例讲述了JavaScript实现级联菜单的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>test</title> <script type="text/javascript"> function f() { var sel=document.getElementById("country"); var sel2=document.getElementById

javascript实现控制的多级下拉菜单

最近身体不适,所以没能如期的更新,抱歉.这里直接把代码贴上,如果有不明白的地方,留言就行. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

javascript实现树形菜单的方法

本文实例讲述了javascript实现树形菜单的方法.分享给大家供大家参考.具体如下: var ME={ ini:{i:true,d:{},d1:{},h:0,h1:0,h2:0}, html:function(da,f){ var s='<ul'+(f?' class="f"':'')+'>'; for(var i=0,l=da.length;i<l;i++){ if(typeof(da[i].pid)=='object'){ s+='<li><b

JavaScript实现向右伸出的多级网页菜单效果

本文实例讲述了JavaScript实现向右伸出的多级网页菜单效果.分享给大家供大家参考.具体如下: 这里使用JavaScript实现向右伸出的多级网页菜单效果,鼠标放在左侧的主菜单上,右侧就伸展出二级菜单,基本没有美化,新手所写,欢迎指正,需要完善的地方还挺多. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-show-web-menu-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3

JavaScript+CSS实现仿天猫侧边网页菜单效果

本文实例讲述了JavaScript+CSS实现仿天猫侧边网页菜单效果.分享给大家供大家参考.具体如下: 这是一款自己写的仿天猫的菜单效果,二级分类的功能已经实现,但没有美化,留着用的朋友自己完善吧,JS功能已经实现,鼠标移在主分类上,二级分类向右伸出展开,目前淘宝网.天猫购物.京东都在用的导航菜单特效,测试时候请先点击一下菜单,主菜单就显示出来了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-ftamil-web-menu-st

Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

本文实例讲述了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,分享给大家供大家参考.具体如下: 这里演示使用JS实现的网页栏目分类菜单,从新浪游戏频道扣下来的,操作方式类似于滑动门的效果,鼠标无需点击,只需把鼠标放在一级主菜单上,就可显示出二级分类菜单,这弹出的这个二级菜单中,实际上又重新进行了分类,可以说整体上,这是一款支持三级分类的网站菜单,目前新浪游戏还在用的效果哦. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-gam

Javascript实现鼠标右键特色菜单

在Web端,通常是不需要右键菜单,各个浏览器也有自己的右键菜单.但是对于一些特殊的网页,是需要右键菜单来增加用户体验的,比如百度音乐,QQ邮箱,相信大家都在Web端使用过右键菜单了,现在来分享一下如何实现,比较简单. 运行代码: window.onload = function() { document.oncontextmenu = block; document.body.onmouseup = function(event) { if (!event) event = window.eve

javascript实现超炫的向上滑行菜单实例

本文实例讲述了javascript实现超炫的向上滑行菜单.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

一款基jquery超炫的动画导航菜单可响应单击事件

今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 源码下载 html代码: <ul> <li><a href="http://www.w2bc.com">First</a></li> <li><a href="http://www.w2bc.com"&g

javascript省市区三级联动下拉框菜单实例演示

本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"

jQuery仿天猫实现超炫的加入购物车

超炫加入购物车效果,和天猫.聚美优品加入购物车效果相媲美.本文介绍一款加入购物车插件jquery.fly.min.js,点击加入购物车,物品以抛物线动画效果到达购物车. 演示图: HTML 首先加载jQuery.js和jquery.fly.min.js插件. <script src="jquery.js"></script> <script src="jquery.fly.min.js"></script> 接着,作4

JS实现超炫网页烟花动画效果的方法

本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

javascript HTML+CSS实现经典橙色导航菜单

本文实例介绍了javascript结合HTML CSS实现橙色导航菜单,分享给大家供大家参考,具体内容如下 效果图: <html > <head> <title>超漂亮的HTML导航菜单CSS代码</title> <style> #top { display: block; text-align: left; height: 105px; position: relative; z-index: 0; } .m { margin: 0 auto;

基于Particles.js制作超炫粒子动态背景效果(仿知乎)

好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果. 上图 上图: 感觉有比格,就照着弄了一个,玩玩. github: https://github.com/VincentGarreau/particles.js/ 操作过程: 网上有基本流程,可以参考一下,不过直接用在登录页面 会有小bug,需要调整下. 1.首先在页面中引入particles.js文件. <script src="js/particles.js

JS库particles.js创建超炫背景粒子插件(附源码下载)

插件描述:particles.js用于创建粒子的轻量级 JavaScript 库. 查看 效果             源码下载 使用 加载 particles.js和配置粒子 <div id="particles-js"></div> <script src="particles.js"></script> app.js /* particlesJS.load(@dom-id, @path-json, @callba

JavaScript简单下拉菜单实例代码

本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最高支持两级,网上常见到的一种菜单风格,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-xlcd-down-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/