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 相关文章推荐
Jquery ui css framework
Jun 28 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
vue开发拖拽进度条滑动组件
Sep 21 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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
索尼ICF-SW100收音机评测
2021/03/02 无线电
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
简单实现JavaScript弹幕效果
2020/08/27 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
pycharm 使用心得(五)断点调试
2014/06/06 Python
跟老齐学Python之类的细节
2014/10/13 Python
Python类定义和类继承详解
2015/05/08 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
J2EE面试题
2016/03/14 面试题
企业演讲稿范文大全
2014/05/20 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB
MySQL三种方式实现递归查询
2022/04/18 MySQL