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

中删除变换和背面可见性样式

Answer 2

将if语句更改为以下内容

var lastScrollTop=0;
$(window).scroll(function(){
    if($(this).scrollTop()>150 && lastScrollTop>$(this).scrollTop()){
        $('#fixedinput').addClass('fixed');
    } else {
        $('#fixedinput').removeClass('fixed');
    }
    lastScrollTop=$(this).scrollTop();
});

JSFiddle demo

当您向下滚过灰色部分时，将无法修复，但一旦您开始向上滚动它就会。

位置固定就像位置相对（滚动页面）

2 个答案: