메인페이지 우측하단에 스크롤 맨 위까지 올릴수있는 버튼을 만들어놨구
아래 코드로 현재 scrollTop이 100이하일때 사라지도록 하였습니다.
Copy
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$(".slideUp").fadeIn();
}else{
$(".slideUp").fadeOut();
}
})여기서 질문!
브라우저의 width값이 1024px 이하로는 사라지게 하고싶어서 아래의 코드를 작성했는데
브라우저의 너비를 한번 늘리거나 줄여야 쿼리가 실행되더라구요 또 브라우저 width값이
1024px 상관없이 scrollTop값에 맞춰서 fadeIn, fadeOut만 됩니다!
코드를 어떻게해야할까요?
Copy
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개 / 댓글 4개
채택된 답변
+20 포인트
2023-07-03 (월) 14:50:52
설정값이 1024 이상일 경우에만 호출되는것 같습니다 다음과 같이 해보시면 어떨까요?/
Copy
function slide() {
if ($(window).width() <= 1024) {
if ($(this).scrollTop() > 100) {
$(".slideUp").fadeOut();
} else {
$(".slideUp").fadeIn();
}
}
}
$(window).on("scroll resize", slide);원하시는게 이게 맞는지 모르겠네요
답변에 대한 댓글 4개
외로운퍼블리셔
2023-07-03 (월) 15:04:45
혹시
[code]
$(window).on("scroll resize", slide);
[/code]
이 부분이 scroll과 resize안에 slide함수를 호출하는건가요?
[code]
$(window).on("scroll resize", slide);
[/code]
이 부분이 scroll과 resize안에 slide함수를 호출하는건가요?
2023-07-03 (월) 15:07:10
네. 맞습니다.
slide 함수를 등록하여 스크롤 및 리사이즈 이벤트가 발생할 때마다 slide 함수가 호출되도록 하게 한 것입니다.
slide 함수를 등록하여 스크롤 및 리사이즈 이벤트가 발생할 때마다 slide 함수가 호출되도록 하게 한 것입니다.
답변을 작성하려면 로그인이 필요합니다.