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程序设计有所帮助。
-
本文向大家介绍jquery实现导航固定顶部的效果仿蘑菇街，包括了jquery实现导航固定顶部的效果仿蘑菇街的使用技巧和注意事项，需要的朋友参考一下 jquery实现导航固定顶部的效果，仿蘑菇街的，感觉还不错，需要的朋友可以参考下
-
本文向大家介绍jQuery导航条固定定位效果实例代码，包括了jQuery导航条固定定位效果实例代码的使用技巧和注意事项，需要的朋友参考一下 实现效果图： 向下滑动时，导航栏固定 代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
高仿百度贴吧App列表效果。特效包括：往上拖拉列表，下面新载入的列表行（cell）会有从大到小的动画效果（仅支持iOS6.0）。 下拉刷新和上拉加载更多会出现小熊图案，基本和新百度贴吧App效果一致。 [Code4App.com]
-
本文向大家介绍Fullpage.js固定导航栏-实现定位导航栏，包括了Fullpage.js固定导航栏-实现定位导航栏的使用技巧和注意事项，需要的朋友参考一下 FullPage.js 是一个简单而易于使用的插件，用来创建全屏滚动网站（也被称为单页网站）。除了可以创建全屏滚动效果以外，也可以给网站添加一些水平的滑块效果。能够自适应不同的屏幕尺寸，包括平板电脑和移动设备。 开始制作自己的个人简历啦，决
-
本文向大家介绍基于Jquery实现仿百度百科右侧导航代码附源码下载，包括了基于Jquery实现仿百度百科右侧导航代码附源码下载的使用技巧和注意事项，需要的朋友参考一下 先给大家展示下效果图，看看是不是亲想要实现的效果，如果还满意的话请查看本文详情，同时大家也可以下载源码哦。 效果图： 效果展示 源码下载 代码说明: 仿百度百科右侧导航代码jquery插件，这个仿百科右侧导航js代码，在很久以
-
本文向大家介绍jQuery简单实现仿京东分类导航层效果，包括了jQuery简单实现仿京东分类导航层效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery简单实现仿京东分类导航层效果。分享给大家供大家参考，具体如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技