제이쿼리로 스크롤값, 윈도우 높이, 문서 높이 구하는 방법
$(window).scroll(function() {
let 윈도우 스크롤 값 = $(window).scrollTop();
let 문서 스크롤 값 $(document).scrollTop();
let 윈도우 높이 값 $(window).height();
let 문서 높이 값 $(document).height();
});
윈도우 스크롤과 문서 스크롤 값은 동일함 아무거나 쓰자
윈도우 스크롤(문서) + 윈도우 높이 값은 = 문서 높이와 동일하다
위의 공식을 사용해서
if($(window).scrollTop() + $(window).height() = $(document).height() ) {
$('# ).addClass('.');
}
else{
$('#k').removeClass('move_Top_Out2').addClass('move_Top_In2');
}
스크롤을 문서 최 하단까지 내렸을때 동작하는 함수를 만들 수 있다
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 300 ) {
$('#left').addClass('hidetoggle');
$('.mbi-simpletalk-kakao').fadeOut(500);
$('#bottom , .ec-base-lookbook').removeClass('move_Top_Out2').addClass('move_Top_In2');
} else {
$('#left').removeClass('hidetoggle');
$('.mbi-simpletalk-kakao').fadeIn(500);
$('#bottom , .ec-base-lookbook').removeClass('move_Top_In2').addClass('move_Top_Out2');
}
});
위에 코드는 문서의 최하단에서 위로 300의 값을 기준으로 클래스를 추가하고 제거 하는 함수이다
'HTML,CSS,JAVASCRIPT' 카테고리의 다른 글
바닐라 자바스크립트로 display : 보이기 , 숨기기 (block,none ) 하기 (0) | 2021.11.18 |
---|---|
제이쿼리 버튼 한개로 디스플레이 와 텍스트 토글 기능 (0) | 2021.11.18 |
그리드 레이아웃 샘플 코드를 만들어보자 (2) | 2021.11.02 |
클래스에 innerHTML 로 html 코드 추가하기 (0) | 2021.10.14 |
bxslider 에 돋보기 기능 구현 (1) | 2021.10.12 |