将一个 Div 分成两个 CSS 部分？

Question

我需要一些帮助来让我的 css 正常工作。

现在我想做的是在用户开始滚动时在 div 上显示阴影。

目前我有。

HTML

<div class="head shadow"></div>

CSS

    .head {
    background: #edeff0;
    position: fixed;
    width: 70%;
    height: 70px;
    top: 0;
    left: 85px;
    right: 15px;
    z-index: 100;
}
.shadow {
    display:none;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
}

Javascript

     $(document).scroll(function () {
     var y = $(this).scrollTop();
     if (y > 1) {
         $('.shadow').fadeIn();
     } else {
         $('.shadow').fadeOut();
     }

 });

现在如果我删除 显示：无； 一切都会显示，如果我把它放回去，它会隐藏一切。

我怎样才能让它只隐藏阴影并让 javascript 工作。

Here is a working (well it's not working) version

谢谢

阿莱德

Answer 1

工作小提琴 - http://jsfiddle.net/andyjh07/yY4U8/

HTML：

<div class="head"></div>

jQuery:

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 1) {
        $('.head').addClass('shadow');
    } else {
        $('.head').removeClass('shadow');
    }
});

CSS：

.shadow {
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
}

如果滚动为真，上述解决方案将shadow 的class 添加到类为head 的元素中，否则将其移除。您之前遇到问题的原因是因为您使用的是display: none;，它将完全隐藏整个元素，而不仅仅是该类的样式

Answer 2

这里是Working Fiddle

（请不要忘记包含 jquery）

HTML

<div class="head"></div>

CSS

.head {
    background: #edeff0;
    position: fixed;
    width: 70%;
    height: 70px;
    top: 0;
    left: 85px;
    right: 15px;
    z-index: 100;
}
.shadow {
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
}

jQuery

$(document).scroll(function () {
     var y = $(this).scrollTop();
     if (y > 1) {
         $('.head').addClass("shadow");
     } else {
        $('.head').removeClass("shadow");
     }

 });

Answer 3

.shadow {
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;

  -webkit-transition-property: all
  -moz-transition-property: all
  -ms-transition-property: all
  -o-transition-property: all
  transition-property: all

  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
}

.shadow.scrolled {
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

$(document).scroll(function () {
  if ($(this).scrollTop() > 0) {
     $('.shadow').addClass("scrolled");
  } else {
     $('.shadow').removeClass("scrolled");
  }
});