位置固定，作用类似于相对位置（随页面滚动）

Question

我在某种条件下（基本上如果用户向上滚动）设置位置固定的元素和其他 css 的样式，但该元素的行为类似于相对定位的元素。换句话说，它随页面滚动而不是保持固定。

我尝试隔离此问题，但此问题仅存在于整个网站中，我需要它在该网站中工作。

var lastScrollTop = 0;
$(window).scroll(function(){
    var st = $(this).scrollTop();
    if(st<=lastScrollTop){
        //scroll up
        if($(this).scrollTop()>235) $('#searchInput').removeClass('slideIn').addClass('stickySearch');
        else $('#searchInput').removeClass('stickySearch').addClass('slideIn');
    }
    else $('#searchInput').removeClass('stickySearch').removeClass('slideIn');
    lastScrollTop = st;
});

目前，该类.slideIn没有与之关联的样式，但.stickySearch确实如此。这是CSS：

.stickySearch{
    width:56% !important;
    position:fixed !important;
    left:0;
    right:0;
}

我检查了开发人员工具，正在应用类并且正在应用样式，但固定的位置不起作用。

这是一个实时网址： http: //goo.gl/ns6UEQ

请注意，窗口的高度较小会很有帮助，以便您可以滚动。向下滚动，使标题隐藏在顶部，然后向上滚动，搜索栏应该出现，但当标题返回视图时，搜索栏将回到标题中的位置。

Answer 1

这是 CSS 以及 Chrome 和 Firefox 的 CSS 实现中存在的错误。

当您的父元素具有backface-visibility或 是 时transformed，其子元素无法固定。

更多信息：http://www.sitepoint.com/forums/showthread.php ?1129352-CSS3-tip-of-the-week-No-1&highlight=chrome+bug+fixed

解决方案：删除变换和背面可见性样式#container