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{
}
답변 1
설정값이 1024 이상일 경우에만 호출되는것 같습니다 다음과 같이 해보시면 어떨까요?/
function slide() {
if ($(window).width() <= 1024) {
if ($(this).scrollTop() > 100) {
$(".slideUp").fadeOut();
} else {
$(".slideUp").fadeIn();
}
}
}
$(window).on("scroll resize", slide);
원하시는게 이게 맞는지 모르겠네요
이게 맞아요!! 감사합니다
혹시
$(window).on("scroll resize", slide);
이 부분이 scroll과 resize안에 slide함수를 호출하는건가요?
네. 맞습니다.
slide 함수를 등록하여 스크롤 및 리사이즈 이벤트가 발생할 때마다 slide 함수가 호출되도록 하게 한 것입니다.
네 답변 감사합니다! 하나 더 배웠습니당ㅎ
답변을 작성하시기 전에 로그인 해주세요.