纯css实现坐标Y固定 X移动效果记忆碎片-网络技术分享

纯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搞定了这个功能。

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

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

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

有兴趣的朋友可以探讨下

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

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

xilouqingzhu说道：

2014 年 3 月 12 日上午 10:46

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

记忆碎片说道：

2014 年 3 月 12 日上午 10:50

离大神差了太远了，只是喜欢折腾CSS而已

回复

佳偶天成水晶店说道：

2014 年 3 月 12 日下午 3:20

就像返回顶部，用来与浏览的边做距离，不就搞定了？

记忆碎片说道：

2014 年 3 月 12 日下午 4:09

这就不是我要的效果啦你换个大屏幕试试就知道了

回复
- 佳偶天成水晶店说道：
  
  2014 年 3 月 12 日下午 4:10
  
  我只有22寸的，没有更大的了。
  
  回复
  - 记忆碎片说道：
    
    2014 年 3 月 12 日下午 4:14
    
    你看我上面的demo网址缩小浏览器屏幕模拟下小屏对比下用2中方式的区别
    
    回复
    - 佳偶天成水晶店说道：
      
      2014 年 3 月 12 日下午 4:17
      
      我看2种，效果1样也。一个是js一个css
  - 记忆碎片说道：
    
    2014 年 3 月 12 日下午 5:43
    
    不一样的呢左边的分享是根据固定在正文的背景框（注意背景的粗边位置）右侧的分享是用fixed固定在网页的最右侧固尺寸一个是会随浏览器大小改变位置一个是不会的
    
    回复

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

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

回复本文 取消回复

回复本文取消回复