제이쿼리 :: height값 구하기 하고 높이 값에 따른 메뉴바 변

지난번에 기록했던 특정위치의 높이 값까지 스크롤바를 내렸을 경우 클래스 추가해주는 스크립트

<script>
         $(function(){
            $(window).scroll(function(){
            var navbar = $(this).scrollTop();
            console.log(navbar);
            var $header = $('header');
            if(navbar > 860){
                $header.addClass('activated');
            }else{
                $header.removeClass('activated');
            }
          })
        })
    </script>
 

여기서 추가해서 이번에는 특정 엘리먼트의 높이 값을 구하고 그 값만큼의 위치까지

스크롤바를 내렸을 경우 클래스가 추가되도록 바꿔보자

제이쿼리에서 height 값을 구하는 기준으로 height, innerHeight, outerHeight, outerHeight(true)가 있는데 먼저 각각의 차이점을 알아보자

	padding	border	margin
height	X	X	X
innerHeight	O	X	X
outerHeight	O	O	X
outerHeight(true)	O	O	O

해당 되는 사이즈를 잘 확인하고

https://api.jquery.com/

J쿼리 사이트에 가면 자세한 사용방법을 확인 할 수 있다.

        
        $(function(){            
            $(window).scroll(function(){
            var navbar = $(this).scrollTop();
            var visualh = $( "#visual" ).height();
            console.log(navbar);
            var $header = $('header');
            if(navbar > visualh){
                $header.addClass('activated');
            }else{
                $header.removeClass('activated');
            }
          })
        })

그래서 이런식으로 수정해 줄 수가 있다.

이제 visual 높이 값에 맞춰서 클래스가 생기는 것을 확인 할 수 있다.