position:fixed 定位兼容问题
position:fixed遭遇IE6不兼容问题，js遭遇google,苹果，遨游等浏览器不兼容问题
css兼容
body {
background-image:url(about:blank);
background-attachment:fixed;/*必要，防抖动*/
}
.test {
position:fixed !important;/*ie7 ff*/
position:absolute;
z-index:21;
_position:absolute; _bottom:auto;_top:expression(eval(document.documentElement.scrollTop));//IE6
}
/*ie6 fix顶端元素针对IE6设置*/
.test{
top:expression(eval(document.documentElement.scrollTop));
}
<div class="test">test</div>
实现上面效果，要判断筛选条何时到了顶部，通过js即可取计算出它距离顶部的高度，当此高度小于等于0时，让它停靠在顶部并浮动在上面即可实现图示效果。
var st = document.documentElement.scrollTop;//滚去的高度
var at = document.getElementById("slb").offsetTop;//元素离页面顶部的高度(固定不变)
var totop=at-st;
判断 totop<=0即可
很easy吧
不过测试时，发现google,苹果，遨游不兼容。
OH，myDog! 为什么没有一家浏览器一统天下，省去大家兼容的麻烦。
不过真被统一了，也就被垄断了，好多前端工程师估计也该失业了，哈哈。
还是说正题吧。
原来google,苹果，遨游浏览器获取滚动条卷去的高度js代码是document.body.scrollTop，
而ie火狐获取的代码是document.documentElement.scrollTop；
if |
ok问题解决！
实例：
//js
$(document).ready(function() {
$(window).scroll(function() {
$("#slb").removeClass(scroll);
$("#slb").addClass(slb);
$("#slb").css(background,#fff);
if(navigator.userAgent.indexOf("Chrome")>0 || navigator.userAgent.indexOf("Safari")>0 || navigator.userAgent.indexOf("maxthon")>0)
{
var st =document.body.scrollTop;//滚去的高度
}
else
{
var st = document.documentElement.scrollTop;//滚去的高度
}
var at = document.getElementById("slb").offsetTop;//元素离页面顶部的高
var slbtop=at-st;
if(slbtop<=0){
$("#slb").removeClass(slb);
$("#slb").addClass(scroll);
}
})
});
//css
.slb{width:998px; height:35px; border:1px solid #ECECEC;}
.scroll{width:998px; height:35px; border:1px solid #ECECEC; position: fixed;top:0;
_position:absolute; _bottom:auto;_top:expression(eval(document.documentElement.scrollTop));}