채택완료

최상단에서만 반투명한 헤더

2018-10-19 (금) 09:48:16 4,017

픽스된 헤더인데 스크롤내리면 반투명하던 헤더가 색이 입혀지는?

그런 효과를 주고싶은데 혹시 

최상단에서만 반투명한 헤더만드는

css나 js 알려주실수있나요 ~? 

답변 2개 / 댓글 3개

채택된 답변
+20 포인트

https://codepen.io/Abdel-fattah/pen/grXOak

참고하세요. 크롬으로 보세요. 응용하시면 됩니다.

답변에 대한 댓글 1개

감사합니다~ !!

제가 이렇게 넣었는데
혹시 오퍼시티는 어떻게넣는건지요 ㅠㅠㅠ ???
;;;;

<script>

$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 300) {
$(".header_wrap").css("background" , "#0F1829"');
}

else{
$(".header_wrap").css("background" , "none");
}
})
})

</script>

https://codeclu.com/questions/89/jquery-css-%EC%97%AC%EB%9F%AC%EA%B0%9C-%ED%95%9C%EB%B2%88%EC%97%90-%EC%A0%81%EC%9A%A9

참고하세요 . 체인으로 여러개 적용하면 됩니다. 또는 css 여러개 입력시

$('css선택자').css({

    "css":"css값",

    "css":"css값",

    "css":"css값"

});

처럼 해도 됩니다.

배경투명도는 opacity로 하면 안됩니다.

background: rgba(0,0,0, 0.5);

이런식으로 해야합니다.

rgba로 색상 넣으세요. 마지막 0.5가 투명도입니다.

답변에 대한 댓글 2개

우왓진짜 감사드려요
그런데 혹시.. 오퍼시티효과가 나타날때 스스륵 나타날수있는 소스도 알려주실수있나요 ,.?ㅠㅠ
색상변하는게 너무 딱딱 귾겨서 ...

답변을 작성하려면 로그인이 필요합니다.