jQuery实现仿百度帖吧头部固定导航效果


Posted in Javascript onAugust 07, 2015

本文实例讲述了jQuery实现仿百度帖吧头部固定导航效果。分享给大家供大家参考。具体如下:

这里使用jquery实现网页上的头部固定,但不随滚动条滚动的效果,在百度贴吧里整理出来的网页特效,最开始的时候,固定条可以随滚动条拖动至网页顶部,但到达网页顶部后,再次拖动滚动条,头部并不滚动,其它的内容可以滚动,貌似在网上见的挺多的效果。

运行效果截图如下:

jQuery实现仿百度帖吧头部固定导航效果

具体代码如下:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航固定</title>
<script src="jquery-1.6.2.min.js"language="javascript" type="text/javascript"></script>
<script>
$(function(){  
 $(window).scroll(function() {
  //$("body").css({"background-position":"center "+$(window).scrollTop()+""});
  if($(window).scrollTop()>=250){
    $(".nav").addClass("fixedNav");
  }else{
    $(".nav").removeClass("fixedNav");
  } 
 });
});
</script>
<style>
*{
  margin:0px;
  padding:0px;
}
div.nav{
  background:#000000;
  height:57px;
  line-height:57px;
  color:#ffffff;
  text-align:center;
  font-family:"微软雅黑", "黑体";
  font-size:30px;
}
div.fixedNav{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  z-index:100000;
  _position:absolute;
  _top:expression(eval(document.documentElement.scrollTop));
}
</style>
</head>
<body> 
<div class="header" style="background:#CCCC00;height:250px;"></div>
<div class="nav">
<p>导航固定</p>
</div>
<div class="content" style="background:#0099FF; height:2000px;"></div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
react 项目中引入图片的几种方式
Jun 02 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 #Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 #Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 #Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 #Javascript
jQuery使用animate创建动画用法实例
Aug 07 #Javascript
浅谈JavaScript 的执行顺序
Aug 07 #Javascript
javascript封装 Cookie 应用接口
Aug 07 #Javascript
You might like
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
深入理解node.js http模块
2018/01/24 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
原生JS实现留言板
2020/03/26 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
python 实现多线程下载视频的代码
2019/11/15 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
pandas数据拼接的实现示例
2020/04/16 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
大学生求职自荐信
2013/12/12 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
国培教师自我鉴定
2014/02/12 职场文书
出生医学证明书
2014/09/15 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
无保留意见审计报告
2015/06/05 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫