jquery 반응형 질문있습니다! 채택완료
외로운퍼블리셔
2년 전
조회 4,324
메인페이지 우측하단에 스크롤 맨 위까지 올릴수있는 버튼을 만들어놨구
아래 코드로 현재 scrollTop이 100이하일때 사라지도록 하였습니다.
</p>
<p>$(window).scroll(function(){</p>
<p> if($(this).scrollTop() > 100){</p>
<p> $(".slideUp").fadeIn();</p>
<p> }else{</p>
<p> $(".slideUp").fadeOut();</p>
<p> }</p>
<p> })</p>
<p>
여기서 질문!
브라우저의 width값이 1024px 이하로는 사라지게 하고싶어서 아래의 코드를 작성했는데
브라우저의 너비를 한번 늘리거나 줄여야 쿼리가 실행되더라구요 또 브라우저 width값이
1024px 상관없이 scrollTop값에 맞춰서 fadeIn, fadeOut만 됩니다!
코드를 어떻게해야할까요?
</p>
<p>function slide(){</p>
<p> $(window).scroll(function(){</p>
<p> if($(this).scrollTop() > 100){</p>
<p> $(".slideUp").fadeIn();</p>
<p> }else{</p>
<p> $(".slideUp").fadeOut();</p>
<p> }</p>
<p> })</p>
<p> };</p>
<p> </p>
<p> let width = $(window).width();</p>
<p> console.log(width);</p>
<p> if(width >= 1024){</p>
<p> $(window).resize(slide);</p>
<p> }else{</p>
<p> </p>
<p> }</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
2년 전
설정값이 1024 이상일 경우에만 호출되는것 같습니다 다음과 같이 해보시면 어떨까요?/
</p>
<p>function slide() {
if ($(window).width() <= 1024) {
if ($(this).scrollTop() > 100) {
$(".slideUp").fadeOut();
} else {
$(".slideUp").fadeIn();
}
}
}</p>
<p>$(window).on("scroll resize", slide);</p>
<p>원하시는게 이게 맞는지 모르겠네요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 4개
�
외로운퍼블리셔
2년 전
이게 맞아요!! 감사합니다
�
외로운퍼블리셔
2년 전
혹시
[code]
$(window).on("scroll resize", slide);
[/code]
이 부분이 scroll과 resize안에 slide함수를 호출하는건가요?
[code]
$(window).on("scroll resize", slide);
[/code]
이 부분이 scroll과 resize안에 slide함수를 호출하는건가요?
�
웹메이킹
2년 전
네. 맞습니다.
slide 함수를 등록하여 스크롤 및 리사이즈 이벤트가 발생할 때마다 slide 함수가 호출되도록 하게 한 것입니다.
slide 함수를 등록하여 스크롤 및 리사이즈 이벤트가 발생할 때마다 slide 함수가 호출되도록 하게 한 것입니다.
�
외로운퍼블리셔
2년 전
네 답변 감사합니다! 하나 더 배웠습니당ㅎ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인