233. 이벤트(브라우저)

브라우저 이벤트

1. resize

$('선택자').resize(()=>{})
$('선택자').resize(function(){

}
                
resize : 브라우저의 사이즈가 바뀔 때마다 동작한다

2. scroll

$('선택자').scroll(()=>{})
$('선택자').scroll(function(){
  
}
               
scroll : 스크롤바 움직일 때마다 동작한다.

$('선택자').offset().top 

문서의 최상단으로부터 해당 요소의 상단까지의 거리를 px로 나타냄

$('선택자').scrollTop()

문서의 최상단으로부터 현재 화면의 상단까지의 거리를 px로 나타냄

3-1. 예제 scroll

$(window).scroll(function(){
 	console.log($('.box).offset().top, $(window).scrollTop())
	(콘솔창 출력 코드 => 문서의 최상단부터 클래스 box 요소의 상단까지의 거리(px))  
                
	                
 	 if($('box).offset().top <= $(window).scrollTop(){
		$('.box').css({
    	  background : "blue"
    }
  	 (위 if 문 해설 : 문서의 최상단부터 클래스 box요소의 상단까지의 거리(px) 가  문서 최상단부터 현재 화면의 상단까지의 거리보다 작거나 같을 때,
      클래스 box 요소의 css 인 background 를 blue 색을 적용해라.)
  
     
 	 else {
    	$('.box').css({
     	 background:'red'
   	 })
	}
});

	(위 else 문 해설 :  클래스 box의 css인 background에 red 를 적용해라 
  

3-2. 예제 resize

$(window).resize(()=>{

     if(window.innerWidth >= 1000) {
        $('body').css({
           background: 'pink'
        })
      }
  	(위 if 문 해설 : 브라우저 안 가로 사이즈가 1000보다 크거나 같을 때, body 의 background에 pink 적용해라)
     
     
     else {
       	$('body').css({
           background: 'transparent'
         })
      }
	}
	(else 문 해설 : body의 background 를 transparent 적용해라)