Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

元素粘滞定位

  曾经webkit也支持过position:sticky,但后来的版本中取消了对其的支持。确实用@media(scroll-top)来实现会灵活的多。但目前的浏览器既不支持position:sticky也不支持@media(scroll-top)。瞬间觉得回到了解放前,只能用JS去实现。
  position:sticky的作用是普通情况下对元素正常定位,但元素企图滚动到屏幕外时会以类似fixed的定位方式留在屏幕的边缘。但是sticky的这个行为太奇怪了,而且功能的适用性太差。实际上要是@media(scroll-top)可以支持的话就可以实现,而且@media比其它固定的属性要灵活的多,只是目前暂时没有实现。
  下面是目前可用的JS实现版 <!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>
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^