채택완료
scroll addClass와 mouseout 혼용 문제
안녕하세요
홈페이지에서 흔히 사용하는 scroll addClass 기능을 사용 하다가 해결이 안되는 문제가 있어 질문드립니다.
Copy
$(document).ready(function() {
let bodyOffset = $("body").offset();
$(window).scroll(function() {
if ($(document).scrollTop() > bodyOffset.top) {
(조금만 스크롤 되면 addClass를 통해 변경 시키는 코드)
} else {
(다시 최상단으로 돌아왔을 때 removeClass를 통해 변경 시키는 코드)
}
});
});위 코드를 통해 스크롤 addClass 기능을 넣고,
Copy
$(function(){
$("#gnb").mouseover(function(){
(마우스 오버 시 addClass를 통해 변경 시키는 코드)
});
$("#gnb, .gnb_2dul").mouseout(function(){
(마우스 아웃 시 removeClass를 통해 변경 시키는 코드)
});
});위 코드를 통해 마우스오버, 마우스아웃 기능을 넣었습니다.
마우스오버는 문제될 것이 없습니다. 마우스아웃이 문제인데요,
스크롤이 된 상태에서 마우스오버 후 마우스아웃을 하면 스크롤 시 적용 되어 있어야 하는 클래스가 사라져버립니다...해당 스크립트가 있으니 당연한 거겠죠...ㅠ
흔한 기능 구현이라 어떤 상황인지 아실 듯 합니다..
스크롤이 조금이라도 된 상태에서는 스크립트가 적용되지 않도록 조건문을 쓰면 될 것 같은데 이걸 모르겠네요..당연히 문서의 최상단에서만 적용되는 스크립트 조건문도 가능하겠죠..
간단한 문제 같은데 도움 좀 부탁드리겠습니다.
감사합니다.
답변 3개
채택된 답변
+20 포인트
$("#gnb, .gnb_2dul").mouseout(function(){
(마우스 아웃 시 removeClass를 통해 변경 시키는 코드)
});
로그아웃시 .gnb_2dul 두번째 메뉴요소는 왜지정을 하는건가요?
그리고 위 소스를 보면 문제점이 좀있는듯합니다.
스크롤 여부를 확인하는 변수가 설정되어야 하며, 또한 스크롤 발생 시 true 로 설정 되어야하죠, 그로인해서 스크롤이 최상단으로 돌아오면 false로 설정 되어야합니다.
그로인해서 마우스 이벤트가 처리되어야한다라는 것이지요.
다음 코드가 도움이 될지 모르겠습니다.
Copy
<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>답변을 작성하려면 로그인이 필요합니다.