army8735

正太米最近想明媒正娶一个ＤＣ，几经对比后选中Canon IXUS 95 IS，于是立刻上淘宝上找既是低价又在上海有实体的店铺，准备择一良辰吉日将她迎回家中。在寻找的过程中偶然发现，淘宝的那个浮动工具条设计相当之性化！于是乎又择一良辰吉日下一喜帖，将她层层剥开细细品味之后写在了博客上。
在哪里能看到她呢？
很简单，随便到淘宝上搜索一件商品，出来的列表中就有她的身影。我将她的芳容截下，以便日后观赏。

人性化在哪里？
众里寻她千百度，找到之后你可能会问：她与旁人相比究竟有何不同之处？温柔贤惠还是可爱迷人？假设你搜出来的列表很长，请将浏览器滚动条往下拉，随后你就会发现窗口上部犹抱琵琶半遮面的她了（红框标出，IE6及以下此功能无法看到）。假如滚动条再拉回去，你会发现她又回到原来的位置对你含情脉脉，观察着你对滚动条的一举一动。

用户体验
为何要做这样一个功能呢？很显然，在列表过长用户浏览的时候，假设他想使用工具条中的某些功能（比如按价格排序），没有这种体验的话就需要将滚动条拉回顶部，然后一点一点在冗长的页面中寻找她的身影。这样实在是太麻烦了！我们能为用户考虑到的就是最最最方便懒惰的办法！现在是一切以用户为中心的时代，丢失了用户就等于丢失了一切！
于是乎工具条摇身一变，将用户服侍得舒舒服服。试问谁不会被这样一个细心体贴的人儿所吸引呢？
技术实现
好了，给诸位ＹＹ完了之后，该到正统的技术原理细节了。她的实现其实很简单，侦听window.onscroll事件，当拖动到一定程度时（这里是工具条看不见时，可以根据scrollTop值来确定），工具条的position变成fixed，如此实现了相对于窗口固定。拖回去的话再变回去，就这么简单。
底部的阴影使用了css3的功能，当然ie是用了滤镜：
-moz-box-shadow:rgba(0,0,0,0.2) 0 3px 3px;
-webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=3,Color=#16000000,Positive=true);
最后说下为什么IE6下不支持，很简单，那是因为IE6没有fixed定位。一般情况要么我们选择无视，要么使用absolute定位并通过侦听window.onscroll事件来不停地变化其top值（scrollTop + clientHeight）。淘宝选择了前者，不知是因为技术维护复杂或者用户体验不佳还是推动浏览器升级。