jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单


Posted in Javascript onSeptember 21, 2016

本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单。分享给大家供大家参考,具体如下:

<!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">
<head>
<meta charset="UTF-8">
<title>【推荐】Jquery+CSS3仿花瓣网固定顶部位置悬浮的导航菜单</title>
<style type="text/css">
body,h1,ul{margin:0;}
ul li{list-style-type:none;}
#header{width:100%;border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;text-align:center;}
h1{padding:10px 0;color:#D74452;}
.nav{width:1000px;background:#fff;margin:20px auto 0;border:solid 1px #ccc;zoom:1;border-radius:5px;box-shadow:0 1px 6px rgba(0,0,0,0.1);color:#D74452;}
.nav_scroll{position:fixed;width:100%;margin:0;left:0;top:0;}
.nav:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
.nav ul li{float:left;margin:0 20px;height:30px;line-height:30px;}
.nav ul li a{cursor:pointer;}
.nav ul li a:hover{text-decoration:underline;}
h2{height:400px;line-height:400px;}
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 var topMain=$("#header").height()+20//是头部的高度加头部与nav导航之间的距离
 var nav=$(".nav");
 $(window).scroll(function(){
 if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll,否则就移除
  nav.addClass("nav_scroll");
 }else{
  nav.removeClass("nav_scroll");
 }
 });
})
</script>
</head>
<body>
<div id="header"><h1>花瓣</h1></div>
<div class="nav">
  <ul>
    <li><a>关注</a></li>
    <li><a>最新</a></li>
    <li><a>最热</a></li>
    <li><a>视频</a></li>
    <li><a>家居</a></li>
    <li><a>旅行</a></li>
  </ul>
</div>
<div style="background:#f9f9f9;color:#000;" id="cont">
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  <h2>4</h2>
  <h2>5</h2>
  <h2>6</h2>
  <h2>7</h2>
  <h2>8</h2>
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  <h2>4</h2>
  <h2>5</h2>
  <h2>6</h2>
  <h2>7</h2>
  <h2>8</h2>
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  <h2>4</h2>
  <h2>5</h2>
  <h2>6</h2>
  <h2>7</h2>
  <h2>8</h2>
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  <h2>4</h2>
  <h2>5</h2>
  <h2>6</h2>
  <h2>7</h2>
  <h2>8</h2>
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  <h2>4</h2>
  <h2>5</h2>
  <h2>6</h2>
  <h2>7</h2>
  <h2>8</h2>
</div>
</body>
</html>

运行效果图如下:

jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript获取文档坐标和视口坐标
May 26 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
React中的refs的使用教程
Feb 13 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 #Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 #Javascript
D3.js实现饼状图的方法详解
Sep 21 #Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 #Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 #Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 #Javascript
D3.js实现折线图的方法详解
Sep 21 #Javascript
You might like
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
多文件上传的例子
2006/10/09 PHP
php缓存技术介绍
2006/11/25 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python中kmeans聚类实现代码
2018/02/23 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
python实现人民币大写转换
2018/06/20 Python
python绘制圆柱体的方法
2018/07/02 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
django富文本编辑器的实现示例
2019/04/10 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
Python操作qml对象过程详解
2019/09/26 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
Python如何合并多个字典或映射
2020/07/24 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
家长通知书教师评语
2014/04/17 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
图书馆义工感想
2015/08/07 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers
ipad隐藏软件app图标方法
2022/04/19 数码科技