置顶菜单:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>置顶菜单</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$(window).scroll(function(){
var nowTop = $(document).scrollTop(); if(nowTop>200){
$('.menu').css({
position:'fixed',
left:'50%',
top:'0',
marginLeft:-480
});
$('.menu_pos').show()
}
else{
$('.menu').css({
position:'static',
marginLeft:'auto'
});
$('.menu_pos').hide();
}
if(nowTop>400){
$('.totop').fadeIn();
}
else{
$('.totop').fadeOut();
}
});
$('.totop').click(function () {
$('html,body').animate({'scrollTop':0})
})
})
</script>
<style type="text/css">
body{margin:0;}
.logo_bar{
width:960px;
height:200px;
background-color: darksalmon;
margin:0 auto;
}
.menu,.menu_pos{
width:960px;
height:50px;
margin:0 auto;
background-color: antiquewhite;
text-align: center;
line-height:50px;
}
.menu_pos{
display:none;
}
.down_con{
width:960px;
height:1800px;
margin:0 auto;
}
.down_con p{
margin-top:100px;
text-align:center;
}
.totop{
width:50px;
height:50px;
background: url(images/01.jpeg) center center no-repeat #000;
border-radius:50%;
position: fixed;
right:50px;
bottom:50px;
display: none;
}
</style>
</head>
<body>
<div class="logo_bar">顶部logo</div>
<div class="menu">置顶菜单</div>
<!--置顶菜单不定位的时候就隐藏,定位的时候就显示出来-->
<div class="menu_pos"></div>
<div class="down_con">
<p>网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
</div>
<!--回到顶部-->
<a href="javascript:;" class="totop"></a>
</body>
</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. 洛谷【P1898】缘分计算

    我对模拟的理解:http://www.cnblogs.com/AKMer/p/9064018.html 题目传送门:https://www.luogu.org/problemnew/show/P189 ...

  2. bzoj 4530 大融合 —— LCT维护子树信息

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4530 用LCT维护子树 size,就是实边和虚边分开维护: 看博客:https://blog ...

  3. HDOJ1015(简单深搜)

    Safecracker Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  4. puppet插件fact和hiera(puppet自动化系列3)

    四.Fact插件 4.1 使用pluginsync进行发布 这种方法比较特殊,节点factpath目录里除了编写好的rb文件之外,还需要在puppet模块中引用,运行一次之后才会转换成fact.通常在 ...

  5. 洛谷-铺地毯-NOIP2011提高组复赛

    题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯.一共有 n 张地毯,编号从 1 到n .现在将这些地毯按照编号从小到大的顺序平行于 ...

  6. fdisk查看硬盘分区表

    fdisk [选项] <磁盘>    更改分区表 fdisk [选项] -l <磁盘> 列出分区表 fdisk -s <分区>        给出分区大小(块数) ...

  7. 项目:条件查询 通过StringBulider和ArrayList(参数有序) 手动拼接sql

    条件查询的sql拼接 参数拼接 public List<Product> findAll(Product product) throws SQLException { //1.1 拼凑sq ...

  8. eclipse 远程操作HIVE

    首先启动HiveServer hive --service hiveserver 10000 & 创建工程 引入包: 代码(简单的查询): package com.hive.jdbc; imp ...

  9. Java学习之多态(Polymorphism)

    多态==晚绑定 不要把函数重载理解为多态. 因为多态是一种运行期的行为,不是编译期的行为. 多态:父类型的引用可以指向子类型的对象. 比如 Parent p = new Child(); 当使用多态方 ...

  10. 23.通过MS17_010来学习msf对渗透的利用

    Metersploit 集成了渗透阶段的全部利用,从漏洞探测,到漏洞利用,最后到后渗透阶段.本次博客主要抛砖引玉,通过对MS17_010漏洞的复现,来学习Metasploit. 漏洞环境: 靶机:wi ...