置顶菜单：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>置顶菜单</title>
  6.     <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             $(window).scroll(function(){
  10.                 var nowTop = $(document).scrollTop();
  11.  
  12.                 if(nowTop>200){
  13.                     $('.menu').css({
  14.                         position:'fixed',
  15.                         left:'50%',
  16.                         top:'0',
  17.                         marginLeft:-480
  18.                     });
  19.                     $('.menu_pos').show()
  20.                 }
  21.                 else{
  22.                     $('.menu').css({
  23.                         position:'static',
  24.                         marginLeft:'auto'
  25.                     });
  26.                     $('.menu_pos').hide();
  27.                 }
  28.                 if(nowTop>400){
  29.                     $('.totop').fadeIn();
  30.                 }
  31.                 else{
  32.                     $('.totop').fadeOut();
  33.                 }
  34.             });
  35.             $('.totop').click(function () {
  36.                 $('html,body').animate({'scrollTop':0})
  37.             })
  38.         })
  39.     </script>
  40.     <style type="text/css">
  41.         body{margin:0;}
  42.         .logo_bar{
  43.             width:960px;
  44.             height:200px;
  45.             background-color: darksalmon;
  46.             margin:0 auto;
  47.         }
  48.         .menu,.menu_pos{
  49.             width:960px;
  50.             height:50px;
  51.             margin:0 auto;
  52.             background-color: antiquewhite;
  53.             text-align: center;
  54.             line-height:50px;
  55.         }
  56.         .menu_pos{
  57.             display:none;
  58.         }
  59.         .down_con{
  60.             width:960px;
  61.             height:1800px;
  62.             margin:0 auto;
  63.         }
  64.         .down_con p{
  65.             margin-top:100px;
  66.             text-align:center;
  67.         }
  68.         .totop{
  69.             width:50px;
  70.             height:50px;
  71.             background: url(images/01.jpeg) center center no-repeat #000;
  72.             border-radius:50%;
  73.             position: fixed;
  74.             right:50px;
  75.             bottom:50px;
  76.             display: none;
  77.         }
  78.     </style>
  79. </head>
  80. <body>
  81.     <div class="logo_bar">顶部logo</div>
  82.     <div class="menu">置顶菜单</div>
  83.     <!--置顶菜单不定位的时候就隐藏，定位的时候就显示出来-->
  84.     <div class="menu_pos"></div>
  85.     <div class="down_con">
  86.         <p>网站主内容</p>
  87.         <p>网站主内容</p>
  88.         <p>网站主内容</p>
  89.         <p>网站主内容</p>
  90.         <p>网站主内容</p>
  91.     </div>
  92.     <!--回到顶部-->
  93.     <a href="javascript:;" class="totop"></a>
  94. </body>
  95. </html>

效果展示：

jquery——制作置顶菜单的更多相关文章

  1. 置顶菜单demo

    一朋友需要置顶菜单的功能,给了个网站,让弄下来.看了下,就把样式及效果拔了下来.去掉了复杂的东西,只保留了其基本实现.有需要的朋友可以拿去用用. <style> #navigation{ ...

  2. jQuery实现置顶和置底特效

    原文地址:http://www.jqueryba.com/3403.html <script src="jquery.min.js" type="text/java ...

  3. jQuery+Superfish制作下拉菜单

    superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...

  4. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery实现表格行上移下移和置顶

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

  6. jQuery操作table数据上移、下移和置顶

    jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...

  7. jQuery制作水平多级下拉菜单

    本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...

  8. jQuery 元素的选中， 置顶、上移、下移、置底、删除

    如截图: <ul> <li class="li01" onclick="C_columnSetTop(this)"><i>& ...

  9. jquery实现标签上移、下移、置顶

    eg:如在后台的标签列表中,实现上移.下移.置顶功能 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如 ...

随机推荐

  1. photonView 空指针异常

    1.OBJ上要有PhotonView 脚本 2.PhotonNetwork.Instantiate方法初始化出来OBJ OBJ 预制体要放在Resources文件夹下 PhotonNetwork.In ...

  2. Cloudera运维

    1. 增加一个节点 1. 拷贝cm的jar包到该节点 2. 设置hostname(hostnamectl set-hostname XXX),然后修改hosts文件 3. 所有的节点添加该hostna ...

  3. poj 2187 Beauty Contest —— 旋转卡壳

    题目:http://poj.org/problem?id=2187 学习资料:https://blog.csdn.net/wang_heng199/article/details/74477738 h ...

  4. 【转】 Pro Android学习笔记（三三）：Menu（4）：Alternative菜单

    目录(?)[-] 什么是Alternative menu替代菜单 小例子说明 Alternative menu代码 关于Category和规范代码写法 关于flags 多个匹配的itemId等参数 什 ...

  5. 一个有关Golang变量作用域的坑

    转自:http://tonybai.com/2015/01/13/a-hole-about-variable-scope-in-golang/ 临近下班前编写和调试一段Golang代码,但运行结果始终 ...

  6. 《Kubernetes权威指南第2版》学习（三）RC学习

    1 RC文件介绍: kind: ReplicationController,表示是一个RC: spec.selector:  RC的Pod标签(Label)选择器,监控和管理拥有这些标签的Pod实例, ...

  7. linux命令-vim一般模式下复制剪切粘贴

    删除光标后的一个字符 x 删除光标前的一个字符 shift+x 删除指定个数的字符 数字+x 删除一行字符 dd 剪切指定行数  数字dd  3dd 剪切3行 其实并没有删掉而是保存着剪切板里 粘贴在 ...

  8. JavaScript之闭包（重新认识）

    最近又重新学习了闭包,发现之前没有深刻理解作用域链,学习作用域链后对闭包才可以做到真正的理解.       闭包是指有权另一个函数作用域中变量的函数.要理解闭包首先理解作用域链.       执行环境 ...

  9. Pycharm的远程代码编辑

    作为一个从java转到python的程序猿,一直觉得python的远程代码调试能力不如java,远程调试一把需要各种改代码,牵扯到eventlet库的时候,问题就更严重,需要调整eventlet的各种 ...

  10. CodeForces 1107F. Vasya and Endless Credits

    题目简述:给定 $n \leq 500$ 个贷款方式,其中第$i$个贷款额为$a_i$元,需要$k_i$个月偿还,每月还贷$b_i$元.在每个月月初可申请其中一个贷款,而在每个月月底时需要还贷.求:( ...