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 相关文章推荐
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
node结合swig渲染摸板的方法
Apr 11 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
Vue自定义多选组件使用详解
Sep 08 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
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
javascript prototype 原型链
2009/03/12 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
在Python中调用ggplot的三种方法
2015/04/08 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
python 排序算法总结及实例详解
2016/09/28 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
解决Python安装cryptography报错问题
2020/09/03 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
酒店实习个人鉴定
2013/12/07 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
研究生简历自我评
2015/03/11 职场文书
工作证明书
2015/06/15 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
php去除deprecated的实例方法
2021/11/17 PHP