2

我有一个脚本，只要用户开始滚动，就会添加一个看起来非常漂亮的框阴影。但是，此框阴影会立即添加。我希望它使用 CSS 3 淡入淡出。我尝试创建关键帧，在 1 秒内将不透明度从 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

我认为你只是有一个拼写错误和一个或两个语法错误，否则你很好。两件事情：

  • 关闭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 回答