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 相关文章推荐
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
浅谈JavaScript中this的指向问题
Jul 28 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP 身份证号验证函数
2009/05/07 PHP
CentOS安装php v8js教程
2015/02/26 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
React优化子组件render的使用
2019/05/12 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
通过shell+python实现企业微信预警
2019/03/07 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
办公室主任主任岗位责任制
2014/02/11 职场文书
程序员求职信
2014/04/16 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
结婚幸福感言
2015/08/01 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书