仿贴吧固顶标题(兼容ie6)

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-01-10 20:00:09　-　阅:　-　评:0　-　积分:0

之前一直在玩贴吧，每日靠签收赚取点滴经验值。直到有一天，突然间发现贴吧标题可以随着滚动条拉到一定高度后固定到浏览器窗口的顶端，有木有很高端的样子。后来自己做了下简单的分析：判断标题随着滚动条时，标题距顶部的值的变化，当值小于某一值时，给标题添加"position:fixed",当值大于此值时，清除属性。然后自己按照上面的分析便写了最终的效果。附ie6下兼容图一张：

下面附源码：

css样式：

/*全局重置*/
*{margin:0;padding:0;}
/*兼容ie6拉动滚动条时页面闪烁问题*/
html{background-attachment:fixed; background:url(a.jpg)}
.ylsj-main{width:500px;height:50px;background:#ccc;z-index:999;}
/*兼容ie6*/
.ylsj-ie6_fix{position:fixed;top:0;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));}

jq代码：

$(function(){
　var $main=$(".ylsj-main");
　var $t=$main.offset().top;//初始距顶值
　$(window).scroll(function(){
　   var $w_t=$(window).scrollTop();//滚动距顶值
　　if($w_t>$t-10){$main.addClass("ylsj-ie6_fix");}
　　else {$main.removeClass("ylsj-ie6_fix");}
　});
});

模块内容：

<!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>仿贴吧固顶标题(兼容ie6)---艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="仿贴吧固顶标题,悬浮,fixed,ie6 bug,兼容ie6">
<meta name="description" content="仿贴吧固顶标题,悬浮,fixed,ie6 bug,兼容ie6">
<link type="text/css" href="css/common.css"  rel="stylesheet"/>
<script src="/skin/yilingsj/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<style type="text/css">
/*全局重置*/
*{margin:0;padding:0;}
/*兼容ie6拉动滚动条时页面闪烁问题*/
html{background-attachment:fixed; background:url(a.jpg)}
/*悬浮*/
.ylsj-main{width:500px;height:50px;background:#ccc;z-index:999;}
/*兼容ie6*/
.ylsj-ie6_fix{position:fixed;top:0;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));}
</style>
<script type="text/javascript">
$(function(){
var $main=$(".ylsj-main");
var $t=$main.offset().top;/*初始距顶值*/
$(window).scroll(function(){
var $w_t=$(window).scrollTop();/*滚动距顶值*/
if($w_t>$t-10){$main.addClass("ylsj-ie6_fix");}
else {$main.removeClass("ylsj-ie6_fix");}
});
});
</script>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="ylsj-main">滑到一定高度后会固顶哦！</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

点此下载→→【代码】仿贴吧固顶标题(兼容ie6).zip　　　

注：本文预期效果的思路与方法均为个人观点，不代表大众，准确性不做保证，以实现最终效果为标准！代码仅供读者参考。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2014-01-10/144.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！