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