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 来操作字符串(一些字符串函数)
Feb 15 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
jQuery取id有.的值的方法
May 21 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
详解a++和++a的区别
Aug 30 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
简单了解three.js 着色器材质
Aug 03 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php的ajax简单实例
2014/02/27 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
php与js的区别是什么
2013/08/05 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
浅谈Python中的模块
2020/06/10 Python
python 5个顶级异步框架推荐
2020/09/09 Python
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
如何提高MySql的安全性
2014/06/19 面试题
大学毕业自我评价
2014/02/02 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript