제이쿼리 스크롤탑 질문좀 부탁드립니다. ㅜㅠㅜ
본문
제이쿼리로 스크롤에따라 작동하는 웹페이지를 만들려고 하는데.. 뭔가 문제가 많네요..
DIV 내에 스크롤을 만들고 ID 지정해서 스크롤을 해주려고 하는데. DIV 높이 자체를 인식을 못하네요 ㅜㅜ
THIS 부분을 아이디값으로 바꿔주어도 그대로입니다. ㅠㅠㅠ
<style>
#id_id{position:absolute;width:100%;height:100%;overflow:auto;}
</style>
$(function () {
var sco01_01 = $(this).scrollTop();
$("#id_id").scroll(function () {
if (sco01_01 > 60) {
$('#main_th01').hide();
} else {
$('#main_th01').show();
}
});
});
그래서 수식이 틀렸나해서.
$(function () {
var sco01_01 = $(this).scrollTop();
$(window).scroll(function () {
if (sco01_01 > 60) {
$('#main_th01').hide();
} else {
$('#main_th01').show();
}
});
});
이렇게 윈도우 높이로 실험을 해봤는데. 실시간 적용이 아니라.
꼭 새로고침을 눌러야 되더라구요.... 뭔가 어찌해야할지 조언좀 부탁드립니다. ㅜㅜ
답변 3
<script>
$(window).scroll(function(){
sco01_01 = $(document).scrollTop();
if(sco01_01 > 150 && sco01_01 < 700){
$('#main_th01').show();
}else{
$('#main_th01').hide();
}
});
</script>
와 같이 사용해보세요..
#main_th01 { position: fixed; top: 0; width: 100%; height: 100px; background-color: #eee; z-index: 1000000; display: none;}
아래 스크립트에 위와 같이 css 추가하셔서 테스트 해보세요
높이를 인식하지 못한다면 css사용에 문제가 있는 것일수 있습니다.
html/css코드를 확인해보세요
#body_01{ position:absolute;width:100%;height:100%;background-color:#fff;}
이런식으로 선언했습니다. 내부 스타일로 돌고, 내부 스타일은 제이쿼리 스크롤바로 돌아갑니다. ㅠㅠ
오버플로우 오토를 줘야할까요?
글쓴이분께서 쓰신대로 하면, document.ready 때 $(this).scrollTop()의 값을 sco01_01에 저장하고 변동되지가 않습니다. $(window).scroll(function(){ }); 안에서 sco01_01의 값을 가져와야 실시간으로 반영됩니다.
$(function () {
$("#id_id").scroll(function () {
var sco01_01 = $(this).scrollTop();
if (sco01_01 > 60) {
$('#main_th01').hide();
} else {
$('#main_th01').show();
}
});
});
아하 해보겠습니다 감사합니다.!