자바스크립트 동적구현 메소드

getBoundingClientRect().height

getBoundingClientRect().width

해당 엘리먼트의 높이값과 넓이값을 구할 수 있다

 

예 : const navbar = document.querySelector("#hd_wrap"); //헤더를 담는 변수 naver
     const navbarHeight = navbar.getBoundingClientRect().height; //naver의 높이값을 담는 navberHeight

	document.addEventListener("scroll", () => { //scroll이 내려가면 이벤트 발생
		if (window.scrollY > navbarHeight) { //만약 윈도우의 스크롤값이 navbarHeight보다 크다면 실행
		    navbar.classList.add("scroll"); // navbar에 scroll클래스 추가
		} else {			     // 그렇지 않다면 실행
			navbar.classList.remove("scroll"); //navbar에 scroll클래스 제거
	    }
	});

scrollTop()

<a class="top_btn" href="#">
	<div>
		<img src="images/svg/top_svg.svg" alt="" />
	</div>
</a>

        $(window).scroll(function() {       //스크롤이 내려가면 이벤트발생
            if ($(this).scrollTop() > 500) { // 버튼이 500픽셀이상 내려가면 실행
                $('.top_btn').fadeIn();      //버튼이fadeIn됨
            } else {
                $('.top_btn').fadeOut();     //버튼이fadeOut됨
            }
        });
        
        $(".top_btn").click(function() {    //버튼을 클릭하면 이벤트 발생
            $('html, body').animate({       //스크롤이 0이 된다(최상단으로 올라간다)
                scrollTop : 0
            }, 400);                        //0.4초에 걸쳐서
            return false;                   //아니면 말아라
        });
    });