스크롤 시 고정 메뉴를 투명하게 만드는 jQuery/자바스크립트 예제

많은 워드프레스 테마에서 화면을 스크롤하면 상단 메뉴가 고정되고 투명하게 표시되도록 합니다. 이러한 효과를 jQuery나 자바스크립트를 사용하여 구현할 수 있습니다. 여러 가지 jQuery 코드를 테스트했는데 그 중 아래의 두 코드가 워드프레스 제대로 작동하는 것을 확인했습니다.

테마에 따라 제대로 작동하지 않을 수 있습니다. 여러 가지 코드를 테스트하여 사용 중인 테마와 가장 잘 호환이 되는 코드를 선택하시기 바랍니다. CSS 요소는 적절히 변경해야 합니다.

아래의 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)시켜야 합니다.)

• 워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법

추가: 자바스크립트 버전

jQuery는 사이트 속도에 부정적인 영향을 미칠 수 있으므로 아래의 자바스크립트 코드를 먼저 테스트해보시기 바랍니다.

window.addEventListener('scroll', function() {
    if (window.scrollY === 0) {
        document.getElementById('header-wrap').style.opacity = '1';
    } else {
        document.getElementById('header-wrap').style.opacity = '0.4';
    }
});

jsfiddle에서 데모를 살펴볼 수 있습니다.

참고

• 자바스크립트를 이용한 시도, 시군구, 읍면동 주소 셀렉트 박스 구현하기
• 영어회화 앱 스픽 40일 후기 (AI 영어 공부 앱)