纯css实现坐标Y固定 X移动效果

2014.03.02 分享 22922 人浏览 8 条留言

最近在做的一个页面,客户有个要求就是需要做一个分享按钮,然后Y轴位置固定,X需要跟随网页来改变(效果见https://huilang.me/project/zao/左侧分享)。

根据我以往的经验,感觉这种用css是完全做不来的,我所熟知的定位有fixed absolute relative貌似都不能满足以上效果。然后根据对方提供的一个js效果(见http://www.rickyh.co.uk/css-position-x-and-position-y/),想实现这个功能。但是那个js里面的demo并不是我们想要的,后面在无意中居然让我用css搞定了这个功能。

下面简单的列出主要的结构

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8" />  
  5.     <title>纯css实现坐标Y固定 X移动效果</title>  
  6.     <style type="text/css">  
  7.         body,div{margin:0;padding:0}  
  8.         .warpper{width: 980px;margin: 0 auto;overflow: hidden;background-color: #F1EAD7;height: 1000px;}  
  9.         .fixed{position:fixed;bottom:50px;}  
  10.         #share{position: absolute;*display: none;_dispaly:none;z-index: 9999999;left: -40px;bottom: 50px;}  
  11.         @media screen and (max-width: 980px) {#share{display: none;}}  
  12.     </style>  
  13. </head>  
  14. <body>  
  15.     <div class="warpper">  
  16.         <div class="fixed">  
  17.             <div id="share" class="off">  
  18.                 <img src="https://huilang.me/project/zao/img/share.png">  
  19.             </div>  
  20.         </div>  
  21.     </div>  
  22. </body>  
  23. </html>  

这个并不是很完美,因为在宽度小于980px(上面我指定了)的时候,X轴位置就又开始变动了,只能用css把他隐藏了

有兴趣的朋友可以探讨下

文章地址:https://huilang.me/css-position-x-and-position-y/

“纯css实现坐标Y固定 X移动效果” 有 8 条评论

  1. xilouqingzhu说道:

    css大神呀,我就差前端工程师的助攻了,来个助攻。哈哈

  2. 就像返回顶部,用来与浏览的边做距离,不就搞定了?

回复本文

您的电子邮箱地址不会被公开。 必填项已用 * 标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif