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 常用函数
Dec 30 Javascript
用jQuery扩展自写的 UI导航
Jan 13 Javascript
实测jquery data()如何存值
Aug 18 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
js实现3D图片展示效果
Mar 09 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 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
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
js jquery数组介绍
2012/07/15 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
四个太阳教学反思
2014/02/01 职场文书
人资专员岗位职责
2014/04/04 职场文书
项目申请汇报材料
2014/08/16 职场文书
公司合作协议范文
2014/10/01 职场文书
学校食品安全责任书
2015/01/29 职场文书
年度考核个人总结
2015/03/06 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
关于观后感的作文
2015/06/18 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
Python超详细分步解析随机漫步
2022/03/17 Python