jquery 반응형 질문있습니다!

jquery 반응형 질문있습니다!

QA

jquery 반응형 질문있습니다!

본문

메인페이지 우측하단에 스크롤 맨 위까지 올릴수있는 버튼을 만들어놨구

아래 코드로 현재 scrollTop이 100이하일때 사라지도록 하였습니다.


$(window).scroll(function(){
        if($(this).scrollTop() > 100){
            $(".slideUp").fadeIn();
        }else{
            $(".slideUp").fadeOut();
        }
    })

 

여기서 질문!

브라우저의 width값이 1024px 이하로는 사라지게 하고싶어서 아래의 코드를 작성했는데

브라우저의 너비를 한번 늘리거나 줄여야 쿼리가 실행되더라구요 또 브라우저 width값이

1024px 상관없이 scrollTop값에 맞춰서 fadeIn, fadeOut만 됩니다!

코드를 어떻게해야할까요?

 


function slide(){
        $(window).scroll(function(){
            if($(this).scrollTop() > 100){
                $(".slideUp").fadeIn();
            }else{
                $(".slideUp").fadeOut();
            }
        })
    };
 
    let width = $(window).width();
    console.log(width);
    if(width >= 1024){
        $(window).resize(slide);
    }else{
 
    }

 

 

2040025585_1688361682.9053.png

이 질문에 댓글 쓰기 :

답변 1

설정값이 1024 이상일 경우에만 호출되는것 같습니다 다음과 같이 해보시면 어떨까요?/


function slide() {
  if ($(window).width() <= 1024) {
    if ($(this).scrollTop() > 100) {
      $(".slideUp").fadeOut();
    } else {
      $(".slideUp").fadeIn();
    }
  }
}
$(window).on("scroll resize", slide);

원하시는게 이게 맞는지 모르겠네요

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT