스크립트 관련 문의드립니다
본문
홈페이지 메뉴에 스크립트를 적용했습니다
$(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 도 작동안할껍니다.
답변 감사합니다~~!
$(document).ready(function(){
var flag=true;
var $this=$('#hd_wrapper');
$(window).scroll(function() {
if ( $(document).scrollTop() > 0 ) {
flag=false; // 위치를 어디야 둬야 할지 모름니다 판단 후 위치를 조정 하세요. flag값을 flase로 하는 경우 if 에 코드가 실행 되지 않습니다.
$this.addClass('bg');
$this.addClass('on');
} else {
$this.removeClass('bg');
$this.removeClass('on');
}
});
$this.hover(function () {
$(this).addClass('bg');
$(this).addClass('on');
},function(){
if (flag) {
$(this).removeClass('bg');
$(this).removeClass('on');
}
});
});
이런식으로 하면 될까여?
답변 감사합니다~!
