javascript - 位置固定，作用类似于相对位置(随页面滚动)

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

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

Answer 1

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

当您的父元素具有backface-visibility或已转换时，其子元素无法修复。

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

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