scroll addClass와 mouseout 혼용 문제
본문
안녕하세요
홈페이지에서 흔히 사용하는 scroll addClass 기능을 사용 하다가 해결이 안되는 문제가 있어 질문드립니다.
$(document).ready(function() {
let bodyOffset = $("body").offset();
$(window).scroll(function() {
if ($(document).scrollTop() > bodyOffset.top) {
(조금만 스크롤 되면 addClass를 통해 변경 시키는 코드)
} else {
(다시 최상단으로 돌아왔을 때 removeClass를 통해 변경 시키는 코드)
}
});
});
위 코드를 통해 스크롤 addClass 기능을 넣고,
$(function(){
$("#gnb").mouseover(function(){
(마우스 오버 시 addClass를 통해 변경 시키는 코드)
});
$("#gnb, .gnb_2dul").mouseout(function(){
(마우스 아웃 시 removeClass를 통해 변경 시키는 코드)
});
});
위 코드를 통해 마우스오버, 마우스아웃 기능을 넣었습니다.
마우스오버는 문제될 것이 없습니다. 마우스아웃이 문제인데요,
스크롤이 된 상태에서 마우스오버 후 마우스아웃을 하면 스크롤 시 적용 되어 있어야 하는 클래스가 사라져버립니다...해당 스크립트가 있으니 당연한 거겠죠...ㅠ
흔한 기능 구현이라 어떤 상황인지 아실 듯 합니다..
스크롤이 조금이라도 된 상태에서는 스크립트가 적용되지 않도록 조건문을 쓰면 될 것 같은데 이걸 모르겠네요..당연히 문서의 최상단에서만 적용되는 스크립트 조건문도 가능하겠죠..
간단한 문제 같은데 도움 좀 부탁드리겠습니다.
감사합니다.
답변 3
$("#gnb, .gnb_2dul").mouseout(function(){
(마우스 아웃 시 removeClass를 통해 변경 시키는 코드)
});
로그아웃시 .gnb_2dul 두번째 메뉴요소는 왜지정을 하는건가요?
그리고 위 소스를 보면 문제점이 좀있는듯합니다.
스크롤 여부를 확인하는 변수가 설정되어야 하며, 또한 스크롤 발생 시 true 로 설정 되어야하죠, 그로인해서 스크롤이 최상단으로 돌아오면 false로 설정 되어야합니다.
그로인해서 마우스 이벤트가 처리되어야한다라는 것이지요.
다음 코드가 도움이 될지 모르겠습니다.
<style>
#gnb { background-color: #eee; height: 100em; }
#gnb:hover, #gnb.someclass { background-color: #000; color: #fff; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
let bodyOffset = $("body").offset();
$(window).scroll(function() {
if ($(document).scrollTop() > bodyOffset.top) {
// (조금만 스크롤 되면 addClass를 통해 변경 시키는 코드)
$("#gnb").addClass('someclass');
} else {
// (다시 최상단으로 돌아왔을 때 removeClass를 통해 변경 시키는 코드)
$("#gnb").removeClass('someclass');
}
});
});
// $(function(){
// $("#gnb").mouseover(function(){
// (마우스 오버 시 addClass를 통해 변경 시키는 코드)
// });
// $("#gnb, .gnb_2dul").mouseout(function(){
// (마우스 아웃 시 removeClass를 통해 변경 시키는 코드)
// });
// });
</script>
<nav id="gnb">
<ul class="gnb_2dul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
소스 코드가 잘못되었습니다.
현재 스크롤 진행중인지 여부를 넣어 판단하셔야 할것 같습니다.
해당 엘리먼트의 top 위치 여부로 판단 가능.
그리고 모바일에서는 대부분의 브라우저 및 크롬에서
아래로 스크롤시 상단 주소가 가려지게 되고 위로 스크롤시 또 나타납니다.
이러한 변수 때문에 top 위치 기준으로 정해야 올바르게 작동합니다.