jquery 동작에 오류가 있어 해결을 하지 못하고 이틀동안 구글링 해가며
원인이 무엇인지 찾고있지만 해결방안을 모르겠습니다.
제가 미천한 지식으로 구현한것은 쇼핑몰에서 스크롤시 구매정보가 고정되어 보여지는것으로.
열고닫기시 토글이 되어 움직이는 것을 제작했습니다.
이해하기 쉽도록 이미지를 첨부했습니다.
1. 카페24에서 제작했으며, 상품의 상세페이지입니다. 위 상태에서 아래로 스크롤을 내리면
2. 이와 같이 하단에 구매정보가 연동되어 고정되며, [option]의 검은바를 클릭하면 아래로 내려가지게끔 만들었어요.
3. 아래로 내려가지면서 옵션 열기라고 표시되고, 다시 누르면 위로 올라옵니다.
여기서 문제는 간헐적으로? 스크롤을 위로 올렸다 클릭시 2번과 같은 상태에서 검은바를 눌러도 미동없이 옵션닫기, 옵션열기만 바뀌고 이 외 무반응 상태입니다.
개발자도구에서 확인시 동작 오류가 나타날때 open 값이 계속 1을 찍고있는데 이것에 대한 이유가 무엇인지 알고싶어요.
아래는 현재 적용된 소스입니다.
[css]
.infoArea.openLayer {background-color:#fff; position:fixed; right:10%; bottom:0px; width:402px !important;z-index:1000; }
.open {display:none}
.openLayer .open { display:block; width: 370px; cursor:pointer; height: 40px; background-color: #000; position: absolute; bottom: 100%; padding: 0 20px 0 12px; line-height: 40px; color: #fff;}
[html]
<div class="infoArea">
<div class="oepn">option</div> <!-- 버튼 -->
내용
</div>
[jquery]
var top = $('.infoArea').offset().top - parseFloat($('.infoArea').css('bottom').replace(/auto/, 0));
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1000) {
$(".infoArea").addClass("openLayer");
} else {
$(".infoArea").removeClass("openLayer");
}
$(".open").click(function(){
var outerHeight=$(".openLayer").outerHeight();
if(open == 0){
$(".openLayer").stop().animate({"bottom":0});
$(".open").html('옵션 닫기');
open = 1;
}else{
$(".openLayer").stop().animate({"bottom":-513+'px'});
$(".open").html('옵션 열기');
open = 0;
}
});
});
// 접속해서 바로 클릭하면 열고닫기에 문제가 없으나 스크롤을 위아래로 움직이다 클릭하면 문제가 나타납니다.
새로고침후 스크롤을 위로 한번 살짝 올렸다 클릭해도 먹통이네요.
}
이 구문은 스크롤이 될때마다 실행하는 것입니다.
$(".open").click(function(){ }
이것은 open이라는 클래스 명을 가진 것을 클릭했을때 동작해야 하는데
이 동작이 스크롤 안에 들어가 있어서 있네요.
방법은 여러가지가 있겠지만 두가지 동작이 분리되어야 할 것 같습니다.
프로그래밍을 배우면 초반에 하는 것이 순서도를 그리는 것입니다.
http://codingisgame.tistory.com/10
주요 구문은 거의다 만들어져 있으므로 순서도를 그려서 정리한다음 그것으로 다시 만들어보세요.