Javascript 位置固定，与相对位置类似（随页面滚动）

我用位置固定和其他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;
});

我签入了开发工具，应用了类和样式，但是固定的位置不起作用

以下是一个实时URL：

---

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

将if语句更改为如下内容

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

---

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

将if语句更改为如下所示

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

---

当你向下滚动通过灰色部分时，这个错误不会被修复，但一旦你开始向上滚动它就会被修复。

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

如果父元素具有

背面可见性

或已

转换

，则无法修复其子元素

详情如下：

---

解决方案：从

#container

中删除转换和背面可见性样式这是一个存在于CSS以及Chrome和Firefox的CSS实现中的错误

如果父元素具有

背面可见性

或已

转换

，则无法修复其子元素

详情如下：

---

解决方案：从

#容器中删除变换和背面可见性样式！重要信息

如果css可能被过度写入，则忽略它…删除此项，您应该准备好离开！！我认为问题在于，您试图跟踪lastscrolltop并针对它进行测试，您应该只需要内部的if/elsestatement@NoobEditor我取下了那个！重要的是，它的行为仍然是一样的。当然，我必须删除

位置：relative最初在那里，以便固定样式。因此，修复正在被样式化，但它仍然与页面一起滚动。@PatrickEvans Hmmm？否，这有助于确定用户是否正在向上滚动。我只希望在用户向上滚动并且标题被隐藏时发生这种情况。@gomangomango，啊，我添加了一个更新的答案，该答案将显示一个修改的if语句，该语句将使其生效，因此只有在向上滚动
时输入才会被修复！重要信息
如果css可能被过度写入，则忽略它…删除此项，您应该准备好离开！！我认为问题在于，您试图跟踪lastscrolltop并针对它进行测试，您应该只需要内部的if/elsestatement@NoobEditor我取下了那个！重要的是，它的行为仍然是一样的。当然，我必须删除
位置：relative最初在那里，以便固定样式。因此，修复正在被样式化，但它仍然与页面一起滚动。@PatrickEvans Hmmm？否，这有助于确定用户是否正在向上滚动。我只希望在用户向上滚动并且标题被隐藏时发生这种情况。@gomangomango，啊，我添加了一个更新的答案，该答案将显示一个修改的if语句，这样只有在向上滚动时输入才会被修复。您的JSFIDLE工作正常，但出于某种原因，
position:fixed在我需要它工作的站点中不工作，这是我的问题。@gomangomango，因为您当前使用if语句的方式使设置位置为“固定”的类在向上滚动多次时被删除。如果您只向上滚动一次，它将出现，但在随后的向上滚动之后，它将被删除。你需要改变你的if语句，使其与我所看到的类似。我做了你的改变，但问题仍然存在。这些类与我的javascript一样被添加得很好，但是css的表现并不像它应该的那样。下面是一个URL，代码来自第1506-1514行。您的JSFIDLE工作正常，但出于某种原因
position:fixed在我需要它工作的站点中不工作，这是我的问题。@gomangomango，因为您当前使用if语句的方式使设置位置为“固定”的类在向上滚动多次时被删除。如果您只向上滚动一次，它将出现，但在随后的向上滚动之后，它将被删除。你需要改变你的if语句，使其与我所看到的类似。我做了你的改变，但问题仍然存在。这些类与我的javascript一样被添加得很好，但是css的表现并不像它应该的那样。这是一个URL，其中包含第1506-1514行中的代码。