html - 位置 :fixed not working on chrome but works in firefox

标签 html css css-position fixed

position?:fixed 在 chrome 浏览器上不工作,但在 firefox 中工作正常。

我有一个侧边栏可以停止滚动并固定在顶部。它在 firefox 中运行完美,但在 chrome 中,当我们滚动到侧边栏位置时,侧边栏消失了。

但是相同的代码在另一个站点上工作..我很困惑...

我的html

<div class="wraper">
<div id="fixme">
<img src="example.com/images/ps14_homepage.jpg" style="width:100%;" alt="ad image">
</div>
</div> 

这是我的javascript,用于将 block 固定在特定高度

var fixmeTop = $('#fixme').offset().top;
jQuery(function($) {
  function fixDiv() {
    var $cache = $('#fixme');
    if ($(window).scrollTop() > fixmeTop)
      $cache.css({
        'position': 'fixed',
        'top': '10px',
      });
    else
      $cache.css({
        'position': 'relative',
        'top': 'auto'
      });
  }
  $(window).scroll(fixDiv);
  fixDiv();
});

CSS

.wraper {float:left;display:block;position:relative; height:auto; border:1px solid #000; width:100%;}

最佳答案

可能不是确切的答案,但我遇到过类似的问题。在其中一个父元素中,我有以下 CSS。一旦删除 position:fixed 就开始在 chrome 中正常工作。

.OuterContainer, .menuSld {-webkit-backface-visibility: hidden;-webkit-perspective: 1000;}

因此,如果您有任何这些样式,请尝试将其删除并检查。

现在回答晚了,但我看到很多人都面临这个问题。

关于html - 位置 :fixed not working on chrome but works in firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28428770/

相关文章:

html - 为什么 translateX 对于 IE9、IE10 和 IE11 上的固定元素不能按预期工作?

jquery - Bootstrap 3 Navbar Collapse 仅适用于子页面

html - 列表样式图像未垂直对齐

javascript - 嵌套 div 中的 jQuery .closest()

javascript - 有没有一种方法可以在网页上使用矢量绘图创建一个小图形?

html - 在 div 上定位文本

css - IE7 float 在其父位置为 :relative 时消失

javascript - 同位素在破坏布局的元素样式中进行奇怪的变换,为什么?

javascript - ECHO 双单引号

javascript - 将鼠标悬停在一个上时,将同一父级的所有先前 li 悬停