테스트 사이트 - 개발 중인 베타 버전입니다

최상단에서만 반투명한 헤더 채택완료

blueocean92 7년 전 조회 3,722

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

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

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

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

 

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

답변 2개

채택된 답변
+20 포인트
진서기
7년 전

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

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

b
blueocean92
7년 전
감사합니다~ !!

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

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

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

진서기
7년 전

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개

b
blueocean92
7년 전
우왓진짜 감사드려요
그런데 혹시.. 오퍼시티효과가 나타날때 스스륵 나타날수있는 소스도 알려주실수있나요 ,.?ㅠㅠ
색상변하는게 너무 딱딱 귾겨서 ...
진서기
7년 전
https://stackoverflow.com/questions/18353274/css-transition-opacity-of-the-background-color

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

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

로그인