jQuery实现仿百度帖吧头部固定导航效果
更新时间:2015年08月07日 15:21:10 作者:皮蛋
这篇文章主要介绍了jQuery实现仿百度帖吧头部固定导航效果,涉及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 UI CSS Framework开发Widget的经验
jQuery UI CSS Framework是jQuery UI中的一个样式框架,可以利用jQuery Theme roller 来生成自己想要的css样式效果。我们可以利用jQuery UI的一些框架来开发出基于jQuery UI CSS Framework效果的插件来。2010-08-08节点的插入之append()和appendTo()的用法介绍
说到节点的插入想必大家对append()和appendTo()的用法并不陌生吧,下面有个不错的是,希望对大家学习有所帮助2014-01-01基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
做了几个兼职,上天帮人完成页面的时候顺便做了一个ajax的请求。发现浏览器的刷新,后退,前进按钮失效。于是乎google了一下。2010-12-12js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
在js使用过程中可能会根据要求获取浏览器窗口的可视区域高度和宽度,滚动条高度,于是本人搜集整理下,拿出来和大家分享,希望可以帮助你们2012-12-12
最新评论