제이쿼리 질문 입니다.
본문
1. 스크롤 내리면 상단 배경 active 적용
2. 마우스 호버 아웃시 전체메뉴 슬라이드 토글
3. 우측 메뉴버튼 클릭시에도 동일한 효과 적용
이게 따로 하면 잘 되는데.. 마우스 호버 했다가 메뉴 버튼 클릭시 이어서 작동이 되야 되는데 먼가 꼬이고 스크롤 내려서 따로 작동하다가도 먼가 꼬이고..
음 좀 효율적인 코드로 수정이 가능할까요.. ?
이게 초기 상태에 작동 됐다가 스크롤 내리고 올렸을때도 동작되야 하니까
트리거 scroll 로 했는데 제대로 된건지 모르겠네요..
http://175.194.254.193:18436/html/sub_WBS-55.html
$(document).scroll(function() {
if($(this).scrollTop() < 10) {
$('.header').removeClass('active');
$('.btn_menu').click(function() {
$('.header').toggleClass('active');
$('.totalmenu').stop().slideToggle(200);
});
$('.gnbWrap').hover(function(){
$('.header').addClass('active');
$('.totalmenu').stop().slideDown(200);
}, function() {
$('.header').removeClass('active');
$('.totalmenu').stop().slideUp(200);
});
} else {
$('.header').addClass('active');
$('.btn_menu').click(function() {
$('.header').addClass('active');
$('.totalmenu').stop().slideToggle(200);
});
$('.gnbWrap').hover(function(){
$('.header').addClass('active');
$('.totalmenu').stop().slideDown(200);
}, function() {
$('.header').addClass('active');
$('.totalmenu').stop().slideUp(200);
});
}
}).trigger('scroll');
답변 2
웹프리죤님 오랜만입니다.
먼저 새해 복 많이 받으세요
질답 활동 접고 편히 쉬고 있는데, 그래도 낯익은 닉이 보여서 로그인 했습니다^0^
코드를 아래 처럼 변경 해보시겠습니까?
$(function() {
var $header = $('.header');
var $totalmenu = $('.totalmenu');
var $document = $(document);
// 공통 함수: 메뉴 상태 업데이트
function updateMenuState() {
var scrollTop = $document.scrollTop();
if (scrollTop < 10) {
$header.removeClass('active');
$totalmenu.stop().slideUp(200);
} else {
$header.addClass('active');
}
}
// 스크롤 이벤트
$document.scroll(function() {
updateMenuState();
});
// 메뉴 버튼 클릭 이벤트
$('.btn_menu').click(function() {
if ($document.scrollTop() < 10) {
$header.toggleClass('active');
} else {
$header.addClass('active');
}
$totalmenu.stop().slideToggle(200);
});
// GNB 호버 이벤트
$('.gnbWrap').hover(
function() {
$header.addClass('active');
$totalmenu.stop().slideDown(200);
},
function() {
if ($document.scrollTop() < 10) {
$header.removeClass('active');
}
$totalmenu.stop().slideUp(200);
}
);
// 초기 상태 설정
updateMenuState();
});
아이고 미니님 새해복많이 받으세요! 감사합니다. 질문 올리면 거의 미니님 도움 잘 받고 있습니다. 코드가... 넘 깔끔하고 동작도 잘하네요^^;; 정말 감사합니다!!
아울러 최적화를 위한 디바운스도 고려 해보세요
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
$(window).on('scroll', debounce(updateMenuState, 100));
위 코드를 작성하기 전
$document.scroll(function() {
updateMenuState();
});
기존 위 코드를 새롭게 댓글로 작성한 코드로 변경 하시면 됩니다. 성능 최적화를 위해 자주 호출 되는 것을 방지하기 위해 사용합니다.
또 언제가 될지 모르겠지만, 기회가 된다면 또 뵙겠습니다.
행복한 하루 보내세요!!
아래의 내용도 한번 참고를 해보세요.
$(function() {
// 전역 변수로 상태 관리
let isMenuOpen = false;
// 스크롤 위치에 따른 헤더 상태 업데이트 함수
function updateHeaderState() {
if($(window).scrollTop() >= 10) {
$('.header').addClass('active');
} else {
if(!isMenuOpen && !$('.gnbWrap').is(':hover')) {
$('.header').removeClass('active');
}
}
}
// 메뉴 토글 함수
function toggleMenu() {
isMenuOpen = !isMenuOpen;
$('.totalmenu').stop().slideToggle(200);
if(isMenuOpen || $(window).scrollTop() >= 10) {
$('.header').addClass('active');
} else {
$('.header').removeClass('active');
}
}
// 초기 스크롤 상태 체크
updateHeaderState();
// 스크롤 이벤트
$(window).on('scroll', function() {
updateHeaderState();
});
// 메뉴 버튼 클릭 이벤트
$('.btn_menu').off('click').on('click', function(e) {
e.preventDefault();
toggleMenu();
});
// GNB 호버 이벤트
$('.gnbWrap').hover(
function() {
$('.header').addClass('active');
if(!isMenuOpen) {
$('.totalmenu').stop().slideDown(200);
}
},
function() {
if(!isMenuOpen && $(window).scrollTop() < 10) {
$('.header').removeClass('active');
}
if(!isMenuOpen) {
$('.totalmenu').stop().slideUp(200);
}
}
);
// 전체 메뉴 영역 호버 이벤트
$('.totalmenu').hover(
function() {
$('.header').addClass('active');
},
function() {
if(!isMenuOpen && $(window).scrollTop() < 10) {
$('.header').removeClass('active');
}
}
);
});
넵! 빠른 답변 감사드립니다. 새해 복 많이 받으세요~