曾经webkit也支持过position:sticky，但后来的版本中取消了对其的支持。确实用

@media(scroll-top)来实现会灵活的多。但目前的浏览器既不支持position:sticky也

不支持@media(scroll-top)。瞬间觉得回到了解放前，只能用JS去实现。

　　position:sticky的作用是普通情况下对元素正常定位，但元素企图滚动到屏幕外

时会以类似fixed的定位方式留在屏幕的边缘。但是sticky的这个行为太奇怪了，而且

功能的适用性太差。实际上要是@media(scroll-top)可以支持的话就可以实现，

而且@media比其它固定的属性要灵活的多，只是目前暂时没有实现。

 

<!DOCTYPE html>
<style>
body {margin:0px;height:2000px;}
a {
  position:absolute;
  top:400px;right:40px;
  width:50px;height:50px;
  text-align:center;
  text-decoration:none;
  font:14px/50px Simsun;
  background:#EEE;
  border:1px solid #CCC;
  color:#000;
  opacity:0.5;
}
a:hover {opacity:1;}
</style>
<a id="init" href="#">顶</a>
<script>
onscroll=function(){
  var v=document.documentElement.scrollTop||document.body.scrollTop;
  if(v>360)
    init.style.position="fixed",
    init.style.top="40px";
  else 
    init.style.position="absolute",
    init.style.top="400px";
}
</script>

 

 

 测试代码一般懒得写，浏览器对有id的元素会自动在全局生成一个引用，虽然是非标准的，但目前全浏览器支持（早起的Firefox版本不支持而已）。

 

给心灵一个纯净空间，让思想，情感，飞扬！