스크롤 시 고정 메뉴를 투명하게 만드는 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)시켜야 합니다.)