Javascript 将一个Div拆分为两个css部分？

我想得到一些帮助，让我的css工作

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

目前我有

HTML

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

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

Javascript

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

 });

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

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

谢谢

阿莱德

工作小提琴-

HTML:

CSS:

上述解决方案将

阴影的
类
添加到类为
头的元素中，如果滚动为真，否则将删除它。以前出现问题的原因是您使用了
display:none将完全隐藏整个元素，而不仅仅是该类的样式

（请不要忘记包括jquery）

HTML

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

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

Jquery

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

 });

只需使用toggleClass（）或者如果您想使用Separate函数，请使用addClass（）和removeClass（），我想做的是使用css隐藏阴影，这样脚本就可以在滚动条上再次显示阴影？下面的回答概括了您需要做的事。它根据发生的情况添加或删除shadow类。你需要摆脱显示：无；我希望看到任何一个答案都能解释问题所在以及他们的解决方案解决问题的原因。顺便说一句，不要使用供应商前缀。。。例如，使用precompiler.sass和compass。或在对快速启动的事件（如scroll）使用toggleClass（）时减少样例。你想精确控制发生的事情。toggleClass（）使用起来很好，但可能会导致不一致。我已经更新了代码，但仍然不起作用这是一把小提琴。一切都按它应该的方式进行谢谢Andy，还有一件事，有没有办法让阴影淡入淡出？你可能需要一些css魔法来做到这一点。不透明度的转换等。我已经添加了一个解释，解释为什么我的解决方案适合您，如果它有帮助，请投票并接受：）
<div class="head"></div>

.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;
}

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

 });

.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");
  }
});