스크롤 시 고정 메뉴를 투명하게 만드는 jQuery 예제

많은 워드프레스 테마에서 화면을 스크롤하면 상단 메뉴가 고정되고 투명하게 표시되도록 합니다. 이러한 효과를 jQuery를 통해 구현할 수 있습니다. 여러 가지 jQuery 코드를 테스트했는데 그 중 아래의 두 코드가 워드프레스 제대로 작동하는 것을 확인했습니다. 주의: 테마에 따라 제대로 작동하지 않을 수 있습니다. 여러 가지 코드를 테스트하여 사용 중인 테마와 가장 잘 호환이 되는 코드를 선택하시기 바랍니다.

$(document).ready(function(){
$(document).scroll(function(){
var top=$(this).scrollTop();
if(top<150){
var dif=1-top/150;
$("#divID").css({opacity:dif});
}
})
});
// Source: http://stackoverflow.com/

위의 코드가 잘 안 되면 아래의 jQuery 코드로 테스트해 보세요.

$(window).scroll(function() {
if($(this).scrollTop() == 0)
$('#divID').css('opacity','1');
else
$('#divID').css('opacity','.4');
});
// Source: http://stackoverflow.com/

여기에서 데모를 확인해볼 수 있습니다. (참고로 워드프레스에서 jQuery를 사용하려면 enqueue 작업을 통해 jQuery를 워드프레스에 후크(hook)시켜야 합니다.)

 


댓글 남기기

* 이메일 주소는 공개되지 않습니다.