스크립트 관련 문의드립니다 채택완료
홈페이지 메뉴에 스크립트를 적용했습니다
$(document).ready(function(){
var $this=$('#hd_wrapper');
$(window).scroll(function() {
if ( $(document).scrollTop() > 0 ) {
$this.addClass('bg');
$this.addClass('on');
} else {
$this.removeClass('bg');
$this.removeClass('on');
}
});
$this.hover(function () {
$(this).addClass('bg');
$(this).addClass('on');
},function(){
$(this).removeClass('bg');
$(this).removeClass('on');
});
});
스크롤 내리거나 상단 메뉴에 마우스오버하면 배경색 및 메뉴 색상이 바뀌는데요
스크롤 내린상태에서는 배경색이 바뀐 형태가 유지되어야 하는데
스크롤 내린상태에서 메뉴에 마우스를 올렸다가 빼면 배경색도 같이 빠져서요ㅜㅜ
$this.hover(function () {
$(this).addClass('bg');
$(this).addClass('on');
},function(){
$(this).removeClass('bg');
$(this).removeClass('on');
});
★. 빨간 코드 부분이 ( $(document).scrollTop() > 0 ) 인 상태에서는 적용이 안되어야 하는데 스크립트 초보라 도통 감이 안와서요ㅜㅜ
스크롤이 내려간 상태라면 마우스를 올렸다 빼더라도 해당 클래스가 remove되지 않게 하려면 어떻게 해야할까요ㅜㅜ
답변 2개
간단하게 말로 설명하면 스크롤이 1px 이라도 내려가면 호버 효과가 없으면 되는건데.
호버 효과를 굳이 밖에다 둘 필요가 있을까요 ?
호버 효과를 else { } 에 넣으면 간단하게 해결될꺼같네요.
스크롤이 0px 일때는 else 조건이 안맞아서 hover 도 작동안할껍니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
</p>
<p>$(document).ready(function(){</p>
<p><span style="color: rgb(231, 76, 60);">var flag=true;</span>
var $this=$('#hd_wrapper');
$(window).scroll(function() {
if ( $(document).scrollTop() > 0 ) {</p>
<p><span style="color: rgb(231, 76, 60);"> flag=false; // 위치를 어디야 둬야 할지 모름니다 판단 후 위치를 조정 하세요. flag값을 flase로 하는 경우 if 에 코드가 실행 되지 않습니다.</span>
$this.addClass('bg');
$this.addClass('on');
} else {
$this.removeClass('bg');
$this.removeClass('on');
}
});
$this.hover(function () {
$(this).addClass('bg');
$(this).addClass('on');
},function(){</p>
<p><span style="color: rgb(231, 76, 60);"><strong> if (flag) {</strong></span>
$(this).removeClass('bg');
$(this).removeClass('on');</p>
<p><span style="color: rgb(231, 76, 60);">}</span>
});
});</p>
<p>
이런식으로 하면 될까여?
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인