scroll addClass와 mouseout 혼용 문제

scroll addClass와 mouseout 혼용 문제

QA

scroll addClass와 mouseout 혼용 문제

답변 3

본문

안녕하세요

 

홈페이지에서 흔히 사용하는 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 위치 기준으로 정해야 올바르게 작동합니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 8
© SIRSOFT
현재 페이지 제일 처음으로