效果如下:
注意到这里有个bug,当点击切换的时候,底部的tab标签会跑走,这是因为fiexd和transform一起用,导致的失效问题。
对应的样式代码如下:
至于解决方案:
从张鑫旭大佬这里可以看到:https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/
原因就是transform的出现,导致了fiexd的降级为position:absolute了
要解决这一个问题,需要用position relative来限制一下。
也就是说,给父盒子(没有的话,创建一个空盒子),增加一个样式:position relative
也就是说,不仅仅是鑫大神博客中说的那样,子盒子fixedd,父盒子transform会出问题。
当两个兄弟组件,一个fixed,另一个transform时,也会出现问题,解决的办法就是父组件添加:position relative
示例(正常情况下兄弟之间是没有问题的,只有子盒子fixedd,父盒子transform会出问题):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.fixed {
position: fixed;
bottom: 0;
left: 42%;
z-index: 20;
}
.first{
width: 200px;
height: 2000px;
margin: 0 auto;
background: yellow;
transition: all 1s linear;
}
/* 鼠标滑过fixed的图片来控制first动画 */
.fixed:hover~.first{
background: blue;
transform: translateX(300px);
}
</style>
</head>
<body>
<div class="main">
<img src='./img/1.jpg' class="fixed">
<div class="first"></div>
</div>
</body>
</html>
效果: