0

我在粘性导航栏中有一个图像，当导航栏固定到页面顶部时，我想淡入该图像。这是应用粘性类之前的 html。

<nav class="navbar">
  <div class="container">
    <img width="115" height="30" id="logo" alt="Logo" src="navbar_logo.png">
    <ul>
      <li><a href="#intro">Home</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="blog/">Blog</a></li>
      <li><a href="#contact">Contact</a></li>
   </ul>
  </div>
</nav>

一旦导航栏到达页面顶部，唯一的变化是：

<nav class="navbar is-sticky" style="position: fixed; top: 0px;">...</nav>

我正在使用的 CSS 是：

#logo {
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -ms-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
}
.navbar #logo {
  margin: 5px 20px 0 0;
  vertical-align: top;
  opacity: 0;
}
.navbar.is-sticky  #logo {
  margin: 5px 20px 0 0;
  vertical-align: top;
  opacity: 1;
}

在 Firefox 中，图像只是出现，而在 Chrome 中，它完美地淡入。我完全不知道错误在哪里。

我创建了一个重新创建问题的 JSFiddle：

http://jsfiddle.net/Fnrr6/1/

4

1 回答 1

2

看起来像一个错误，一个较旧的错误，不幸的是没有得到足够的关注：

https://bugzilla.mozilla.org/show_bug.cgi?id=625289

https://bugzilla.mozilla.org/show_bug.cgi?id=788677

https://bugzilla.mozilla.org/show_bug.cgi?id=800927

https://bugzilla.mozilla.org/show_bug.cgi?id=821976

更改position为fixed或absolute终止转换。is-sticky作为一种解决方法，您可以在添加类之前使用短暂的超时：

http://jsfiddle.net/fdRBH/

$('.navbar').css({
    position: 'fixed',
    top: 0
});
setTimeout(function() {
    $('.navbar').addClass('is-sticky');
},
60);
于 2013-07-11T14:24:53.487 回答