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

由于

ALED

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

如果滚动为true，上面的解决方案会将class shadow添加到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");
  }
});

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

3 个答案: