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

【问题标题】：Position fixed acting like position relative ( scrolling with page )固定位置的作用类似于相对位置（随页面滚动）
【发布时间】：2014-01-26 08:02:45
【问题描述】：

我在某个条件下（基本上如果用户向上滚动）设置位置固定的元素和其他 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

请注意，有一个小窗口高度有助于滚动。向下滚动以将标题隐藏在顶部，然后向上滚动并显示搜索栏，但当标题返回视图时，搜索栏将回到标题中的位置。

【问题讨论】：

!important 忽略 css 如果它可以被覆盖....删除它，你应该很高兴去！
我认为问题在于您正在尝试跟踪 lastscrolltop 并对其进行测试，您应该只需要内部 if/else 语句
@NoobEditor 我删除了 !important 并且它的行为仍然相同。我当然必须删除原来那里的position:relative;，以便固定样式。如此固定的样式正在被设置，但它仍然随着页面滚动。
@PatrickEvans 嗯？不，这有助于确定用户是否向上滚动。我只希望在用户向上滚动并且标题被隐藏时发生这种情况。
@gomangomango，啊，我添加了一个更新的答案，它将显示一个修改后的 if 语句，这样输入只会在向上滚动时被修复

标签： javascript jquery html css css-position

【解决方案1】：

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

当你有一个父元素有backface-visibility或者是transformed时，它的子元素不能被固定。

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

【讨论】：

【解决方案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

当你向下滚动到灰色部分时，它不会被修复，但是一旦你开始向上滚动它就会被修复。

【讨论】：

您的 JSFiddle 工作正常，但由于某种原因 position:fixed; 无法在我需要它工作的站点中工作，这是我的问题。
@gomangomango 因为您当前拥有 if 语句的方式，以便在多次向上滚动时将位置设置为固定的类被删除。如果您只向上滚动一次它会出现，但在随后的向上滚动后它会被删除。您需要更改您的 if 语句以与我所拥有的类似
啊，我明白了。我做了你的改变，但问题仍然存在。与我的 javascript 一样，这些类被添加得很好，但是 css 的行为并不正常。这是第 1506 - 1514 行代码的 URL。