2

ユーザーがスクロールを開始するとすぐに、非常に見栄えの良いボックス シャドウが追加されるスクリプトがあります。ただし、このボックスの影は即座に追加されます。CSS 3 を使用してフェードインすることをお勧めします。不透明度を 0 ～ 1 秒で変更するキーフレームを作成しようとしましたが、うまくいきません。

私が使用しているスクリプトは次のとおりです。

$(function() {
 $(window).scroll(function() {
    var top_offset = $(window).scrollTop();
    if (top_offset) {
      $('.top_head_separator').addClass('fixed-top fade-in');
  }
});

CSS:

.fixed-top {
  background:#FFFFFF;
  box-shadow: 0 7px 15px 4px rgba(0,0,0,0.38);
  height: 90px;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;

}
@keyframes fadeIn {
  0% {opacity: 0;}  
  100% {opacity: 1;}
}

.fadeIn {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}

ボックスの影をフェードインするにはどうすればよいですか?

注: この質問ではベンダー プレフィックスを省略しましたが、コードには含まれています。

4

1 に答える 1

2

スペルミスと構文エラーが 1 つか 2 つあるだけだと思いますが、それ以外は問題ありません。2つのこと：

  • jQuery で両方の関数を閉じます。
  • あなたのCSSは言及していますfadeInが、jQueryは持っていましたfade-in

新しく修正された jQuery コードは次のとおりです。

$(function() {
 $(window).scroll(function() {
    var top_offset = $(window).scrollTop();
    if (top_offset) {
      $('.top_head_separator').addClass('fixed-top fadeIn'); // <<<< "fadeIn"
    }
 }); // <<<< ADDED
});

実際の例については、この-webkit-デモを参照してください。

于 2013-03-10T09:00:28.553 に答える