[Javascript, jQuery] 상단 이동하기 및 GNB hide show

chaewon·2022년 4월 1일
0

javascript

목록 보기
5/8

//스크롤 이동
    $('.class or #id').click(function() {
        $( 'html, body' ).animate( { scrollTop : 0 }, 200 ); //애니메이션 효과로 부드럽게 이동가능 숫자가 작을수록 느리게 이동
        return false;
    });

//상단에 있을 때 안보이며 상단이랑 떨어졌을 때 보여지는 것
$(window).scroll(function(){
		const windowTop = $(window).scrollTop();
		if(windowTop == 0){
			$('.class or #id').fadeOut(200);	
		} else if(windowTop > 0){
			$('.class or #id').fadeIn(200);
		}
	})


//GNB(gsap를 이용한 것)

let beforScroll = 0; //현재 가지고 있는 값
    $(window).on('scroll', function(){
    	let afterScroll = $(this).scrollTop(); //움직였을 때 가지고 있는 값
    	if($(window).innerWidth() > 991) {//PC
    		if(beforScroll < afterScroll){
        		gsap.to('.header', {duration:0.2, opacity:0, onComplete:function(){$('.header').hide()}})
        	} else {
        		$('.header').show();
        		gsap.to('.header', {duration:0.2, opacity:1})
        	}
    	} else { //Mobile

    		if(beforScroll < afterScroll){
    			gsap.to('.m-header', {duration:0.2, opacity:0, onComplete:function(){$('.m-header').hide()}})
        	} else {
        		$('.m-header').show();
        		gsap.to('.m-header', {duration:0.2, opacity:1})
        	}
    	}
    	
    	beforScroll = afterScroll; //움직였던 값이 현재 가지고 있는 값으로 넣어 줌으로써 과거의 값을 가지고 있는 것
    })
profile
의문은 '삶의 수준'을 결정하고, 질문은 '삶 자체'를 바꾼다.

0개의 댓글