固定的位置，像位置相对（与页面滚动）

我正在定位一个位置固定的元素和其他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; 
}

我的开发人员工具检查和类被应用，并正在应用的样式，但固定的位置只是不工作。

这里是一个活的URL：http://goo.gl/ns6UEQ

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

来源

2014-01-25 gomangomango

'变换和背面的知名度造型important'忽略的CSS，如果它可以被覆盖....删除此，你应该gud去！ – NoobEditor

我认为问题在于你试图跟踪lastscrolltop并测试它，你应该只需要内部的if/else语句 –

@NoobEditor我删除了！重要的，它仍然表现相同。当然，我必须在原来的位置删除'position：relative'，这样固定就会变成风格。所以修正了这个问题，但它仍然在页面上滚动。 – gomangomango

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

当您有一个父元素具有backface-visibility或是transformed时，它的子元素无法修复。

！解决方法：请从#container

来源

2014-01-26 00:02:45 gomangomango

更改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

当你向下滚动过去的灰色部分将不会被固定的，但一旦你开始滚动起来会的。

来源

2014-01-25 05:08:25

您的JSFiddle工作正常，但由于某种原因'position：fixed;'不是在我的网站工作，我需要它的工作，这是我的问题。 – gomangomango

@gomangomango因为你现在拥有你的if语句的方式，所以当滚动不止一次时，将位置固定的类将被删除。如果只向上滚动一次，它会出现，但在随后的上卷之后，它将被移除。你需要改变你的if语句来工作，类似于我所拥有的 –

啊，我明白了。我做了您的更改，但问题仍然存在。这些类和我的javascript一样正在被添加，但是css并不像它应该那样运行。这是一个包含1506-1514行代码的URL。 – gomangomango

固定的位置，像位置相对（与页面滚动）

回答

相关问题