Javascript CSS从固定到绝对的转换，顶部变化不起作用

我的博客上有一个固定的顶部标题栏。我希望在用户向下滚动特定点时，在第一个标题顶部显示另一个标题栏

我通过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>

CSS

我有一个

我的问题是:

为什么从-55px绝对值转换为0固定值，而不是从-55px绝对值转换为0固定值

我做错了什么？请引导我。我被卡住了。

移动

'position: fixed;'
'z-index: 999;'

要

#共享条

并关闭

。卡住的

修复了该问题

---

尝试

确实会发生转换。快速向上滚动，您将捕捉到它。说明：当收割台从

位置：固定

切换到

位置：绝对

，

顶部：0

时，在这两种情况下，它都会自动移动到与其相关的容器顶部。这就是为什么过渡似乎没有发生。它确实发生了，但是元素不再在视口中，那么如何获得向上滑动的效果呢？@mbrrw的答案对我很有用。。。您可能需要在CSS中向转换属性添加特定于浏览器的前缀。（-moz，-o，-webkit）我添加了属性，它在Chrome上工作，而不是在Firefox上。检查此项：从

中删除
位置：绝对值
。粘性包装

我们还需要移动z索引。请编辑您的答案，以便我可以接受它作为正确的答案。

#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;
} 

'position: fixed;'
'z-index: 999;'