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分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
vue+Element-ui实现分页效果
Nov 15 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
杏林同学录(六)
2006/10/09 PHP
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
php时间计算相关问题小结
2016/05/09 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
php精度计算的问题解析
2019/06/21 PHP
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
python删除过期文件的方法
2015/05/29 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python实现类之间的方法互相调用
2018/04/29 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
文明餐桌活动方案
2014/02/11 职场文书
2014年安全生产责任书
2014/07/22 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
幼儿学前班评语
2014/12/29 职场文书
地球上的星星观后感
2015/06/02 职场文书
学校运动会感想
2015/08/10 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP