將一個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"); 
    } 
});