html css 코딩 질문좀용 ㅠ

게시물 수정 , 삭제는 로그인 필요

 반응형 웹 스킨을 사용하고있는데 모바일 버전 상단 헤더부분에서 스크롤을 내렸을때 헤더부분에 흰색 배경이 깔리면서 헤더 메뉴와로고가컬러가 바뀌면서 고정되어 따라 내려올수있게 만들려고합니다.

css 부분 사진남겨요 도와주세요 ㅠㅠㅠㅠㅠㅠㅠㅠ

.ie8 #header .nav , .ie8 #header .header_right{display:none;}

.ie8 #m_header{display:block;}

.ie8 .nav{display:none;}

.ie8 #contents{padding:55px 10px 0 10px;}

html.active , body.active{height:100%; overflow:hidden; position:fixed;}

.bg_mask_wrap{width:100%; height:100%; top:0; left:0; background-color:#000; text-align:center; position:fixed; z-index:10; display:none; opacity:0.7; filter:alpha(opacity=70);}

.bg_mask{width:100%; height:100%; display:table;}

.bg_mask_contents{width:100%; display:table-cell; vertical-align:middle; line-height:20px;}

.bg_mask_contents h2{font-size:25px; line-height:40px;}

.bg_mask_contents h2 ,     .bg_mask_contents p {color:#fff;}

#header_wrap_outer{position:fixed; top:0; left:0; width:100%; z-index:3; padding:0px 0 0 0;background:white;width:100%;height:50px;}

#header_wrap{width:275px;height:10px; margin:0 auto;}

#header{font-size:16px;position:relative; top: 15px; left:300px; max-width:100%;}

#header a:hover{text-decoration:underline;}

#header div{position:relative; z-index:2;}

.nav{text-align:center;}

.nav li{display:inline-block; vertical-align:top; *zoom:1; *display:inline; padding:0 15px 0 15px; position:relative;}

.nav ul li a{font-size:16px; position:relative; bottom: 80px; right: 100px;max-width:100%;margin-top:0px; display:inline-block;}

.nav ul li:hover > ul{display:block;}

.nav .fa-search{position:relative; left:0px; top:0;}    

.nav .logo{font-size:20px; clear:both; display:block; padding:0 0 50px 0;position:relative; right:400px; top:-9.5px;}

.nav ul li ul{display:none; position:absolute; left:0; width:100%; padding-top:5px;}

.nav ul li ul li{display:block; width:100%; padding:0; line-height:0px;}

#header .header_right .left{float:left;}

#header .header_right .right{float:right;}

#header .header_right li{display:inline-block; *zoom:1; *display:inline; vertical-align:top;}

#header .header_right a{margin-left:15px;}

#header .header_right .board{display:inline-block; *zoom:1; *display:inline; vertical-align:middle;}

#header .header_right ul li ul{position:absolute; display:none;}

#header .header_right ul li ul a{clear:both; display:block; text-align:left; line-height:20px; padding-top:5px;}   

#header .header_right ul li:hover > ul{display:block;}

#searchBarForm{display:inline-block; *zoom:1; *display:inline; vertical-align:middle; width:200px;}

#searchBarForm input{border:0!important; background:none; width:50%; height:100%!important; line-height:20px; font-size:15px; color:#000; text-indent:0; border-bottom:1px solid #000!important; padding:0!important;}

#contents{position:relative; z-index:0; padding:180px 0 110px 0; width:95%; margin:0 auto; max-width:950px;}    

#mobile_mask{width:100%; height:100%; position:fixed; top:0; left:0; background-color:#fff; opacity:0.5; filter:alpha(opacity=50); display:none; z-index:5;}

#mobile_mask.active{display:block;}    

#mobile_wrap_outer{width:80%; height:100%; position:fixed; top:0; left:0; z-index:6; background-color:#fff; border-right:1px solid #aaa;  overflow:auto; display:none;}

#mobile_wrap_outer.active{display:block;}

#mobile_wrap{width:100%; display:table; }

#m_header{display:none;}

.m_logo_wrap{;position:fixed;top:20px; z-index:1; text-align:center; width:100%;}

.m_logo a{font-size:20px;}

.fa a{display:block; position:absolute; top:0; left:0; width:100%; height:100%;}

.fa-bars{font-size:20px;left:10px;}

.fa-search{left:40px;}

.fa-shopping-bag{right:10px;}

.fa-user-o{right:40px;}

.fa-bars , .fa-shopping-bag , .fa-search , .fa-user-o{position:fixed; top:10px; z-index:4; cursor:pointer; width:18px; line-height:20px!important; height:20px!important; font-size:15px; padding:10px;}

.fa-bars.white , .fa-shopping-bag.white , .fa-search.white , .fa-user-o.white{color:#fff;}

.fa-bars.black , .fa-shopping-bag.black , .fa-search.black , .fa-user-o.black{color:#000;}   

#footer{text-align:center; padding:50px 0 50px 0;font-size:12px;}    

#footer a:hover{text-decoration:underline;}

#footer .sns a{padding:20px 10px 20px 10px; font-size:15px;}

#footer .sns a:hover{text-decoration:none; opacity:0.5; filter:alpha(opacity=50);}

#footer .copy{line-height:20px;}

#footer .menu a{padding:15px;}

    

    

/*테블릿*/

@media only screen and (max-width: 1024px) {    

#header_wrap_outer ,    .nav , #header .header_right{display:none;}

    #m_header{display:block!important;}

    #contents{width:auto; padding:100px 17px;}

}    

/*모바일*/

@media only screen and (max-width: 768px) {

}