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