테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

제이쿼리 스크롤탑 질문좀 부탁드립니다. ㅜㅠㅜ 채택완료

고가형가죽 10년 전 조회 4,091
답변 3
목록

 

제이쿼리로 스크롤에따라 작동하는 웹페이지를 만들려고 하는데.. 뭔가 문제가 많네요..

 

DIV 내에 스크롤을 만들고 ID 지정해서 스크롤을 해주려고 하는데. DIV 높이 자체를 인식을 못하네요 ㅜㅜ

 

THIS 부분을 아이디값으로 바꿔주어도 그대로입니다. ㅠㅠㅠ

 

</p><p><style></p><p>#id_id{position:absolute;width:100%;height:100%;overflow:auto;}</p><p></style></p><p>$(function () {</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>var sco01_01 = $(this).scrollTop();</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>$("#id_id").scroll(function () {</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>if (sco01_01 > 60) {</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>$('#main_th01').hide();</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>} else {</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>$('#main_th01').show();</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>}</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>});</p><p>});</p><p>

 

 

그래서 수식이 틀렸나해서.

 

</p><p>$(function () {</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>var sco01_01 = $(this).scrollTop();</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>$(window).scroll(function () {</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>if (sco01_01 > 60) {</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>$('#main_th01').hide();</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>} else {</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>$('#main_th01').show();</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>}</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>});</p><p>}); </p><p>

 

이렇게 윈도우 높이로 실험을 해봤는데. 실시간 적용이 아니라.

 

꼭 새로고침을 눌러야 되더라구요.... 뭔가 어찌해야할지 조언좀 부탁드립니다. ㅜㅜ

#jquery
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
L
LaRuota
10년 전

 

 </p><p><script>
$(window).scroll(function(){
     sco01_01 = $(document).scrollTop();
     if(sco01_01 > 150 && sco01_01 < 700){
          $('#main_th01').show();
     }else{
          $('#main_th01').hide();
     }
}); 
</script>​</p><p>
 

 

 

와 같이 사용해보세요.. 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

P
PWneo
10년 전

글쓴이분께서 쓰신대로 하면, document.ready 때 $(this).scrollTop()의 값을 sco01_01에 저장하고 변동되지가 않습니다. $(window).scroll(function(){ }); 안에서 sco01_01의 값을 가져와야 실시간으로 반영됩니다. 

</p><p>$(function () {
 	$("#id_id").scroll(function () {
 	var sco01_01 = $(this).scrollTop();
  	if (sco01_01 > 60) {
				      $('#main_th01').hide();
			   } else {
				     $('#main_th01').show();
			   }
		  });
});</p><p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
고가형가죽
10년 전
아하 해보겠습니다 감사합니다.!

댓글을 작성하려면 로그인이 필요합니다.

L
LaRuota
10년 전

#main_th01 { position: fixed; top: 0; width: 100%; height: 100px; background-color: #eee; z-index: 1000000; display: none;}

 

아래 스크립트에 위와 같이 css 추가하셔서 테스트 해보세요

 

높이를 인식하지 못한다면 css사용에 문제가 있는 것일수 있습니다.

html/css코드를 확인해보세요 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

�
고가형가죽
10년 전
#body_01{ position:absolute;width:100%;height:100%;background-color:#fff;}

이런식으로 선언했습니다. 내부 스타일로 돌고, 내부 스타일은 제이쿼리 스크롤바로 돌아갑니다. ㅠㅠ
�
고가형가죽
10년 전
오버플로우 오토를 줘야할까요?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인