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

positiontofixedまたはkill を変更すると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 に答える