将一个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(); 
    } 

}); 

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

我怎样才能得到它只隐藏阴影，并使JavaScript的工作。

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

感谢

ALED

Answer 1

工作FIDDLE - 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"); 
    } 
});