CSS从固定到绝对的转换,顶部的变化不起作用
CSS transition from fixed to absolute with change in top not working
我的博客有一个固定的顶部标题栏。我希望当用户向下滚动某个特定点时,在第一个标题的顶部显示另一个标题栏。
我实现它与jQuery路径点。
我已经添加了过渡,这样当它出现时它就会向下滑动。
但问题是,当我向上滚动时,转换不会发生。
下面是我的代码:<div id="share-bar" class="sticky-wrapper">This is second header</div>
<div id="header">This is normal header</div>
<p id="trigger">THIS IS THE PLACE WHERE SECOND BAR COMES UP</p>
JS
$('#trigger').waypoint(function(){
$( "#share-bar" ).toggleClass("stuck");
});
CSS #header {
height: 55px;
background-color: black;
color: white;
position: fixed;
top: 0;
width: 100%;
}
#share-bar {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #DDDDDD;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
float: left;
height: 55px;
padding: 0;
width: 100%;
transition: all 0.2s ease 0s;
}
.sticky-wrapper { position:absolute; top:-55px; }
.stuck {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
transition: all 0.2s ease 0s;
}
我有一个工作的小提琴在这里
我的问题是:- 为什么过渡工作从-55px绝对到0固定,而不是反之亦然?
我做错了什么?请引导我。我卡住了。
移动
'position: fixed;'
'z-index: 999;'
to #share-bar
and off .stuck
修复。
试试这个
相关文章:
- 如何在JavaScript中将字符串转换为函数引用
- 如何在Javascript中将JSon对象转换为数组
- 使用JS将数组转换为json对象
- 如何使用json将对象列表从java转换为javascript
- 偶尔结结巴巴地说“;堆叠的”;translate()上的转换(v4.0.0-alpha40)
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 在Javascript中转换对象数组
- 单击页面上的链接后高度发生变化
- 将数字转换为一定数量的硬币
- 将纯文本URL转换为可单击链接
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 如何使用js将SNAPSHOT内部版本号转换为3位数的整数
- 如何将TypeScript对象转换为普通对象
- 检测个位数整数时正在转换毫秒
- 从javascript到jquery的转换
- DOM事件通过JSON转换为java
- js高度变化的转换
- Webkit重绘问题:转换比例+位置变化
- Javascript字符串在转换为日期()时发生变化
- CSS从固定到绝对的转换,顶部的变化不起作用