채택완료
고수님들 제발 도와주세요 ㅜㅜ script 관련!
링크 같이 올려드려요 해결 방법을 도저히 모르겠는데 제발 도와주세요 ㅠㅠ
<script>
//이 부분이 안먹혀요ㅠㅠ 스크롤바가 없어서 scrollTop을 인식하지 못하는 것 같은데..328번줄 보시면 scrollBar: true로 바꾸면 스크롤바가 생기면서 아래 명령이 적용이 되는데, 모바일에서 아래로 스크롤 했다가 위로 다시 올라오는게 안되더라구요..
//스크롤을 내리면 fullpage.js에 있는 명령어? 식? 그거에 따라 body에 fp-viewing-0 / fp-viewing-1 .. 이렇게 class가 바뀌는데 body class가 바뀌면 아래 명령어가 실행되게끔 하면 안될까요? 어떻게 하는지 몰라서.. ㅜㅜ 이것만 되면 되는데 좀 도와주세요
setInterval(function(){
if($(window).scrollTop()>= 50){
$('#main_header').css('display','none');
$('.nav').css('display','none');
$('#top_nav').animate({top:0},300);
$('#top_nav').addClass('scroll');
}else{
$('#main_header').css('display','block');
$('.nav').css('display','block');
$('#top_nav').animate({top:-100},0);
$('#top_nav').removeClass('scroll');
}
},1000);
</script>
|
답변 4개 / 댓글 7개
채택된 답변
+20 포인트
$(window).scrollTop() 이 계속 0이네요
console.log($(window).scrollTop()) 찍어보시면 0만나와요
답변에 대한 댓글 3개
님들 해결됐어요~ 아래처럼 하니까 되더라구요! 다들 너무 감사합니다!!
setInterval(function(){
if($('body').hasClass('fp-viewing-0')){
$('#main_header').css('display','block');
$('.nav').css('display','block');
$('#top_nav').animate({top:-100},0);
$('#top_nav').removeClass('scroll');
}else{
$('#main_header').css('display','none');
$('.nav').css('display','none');
$('#top_nav').animate({top:0},300);
$('#top_nav').addClass('scroll');
}
},1000);
Copy
function scrollEvent() {
if (jQuery("body").hasClass("fp-viewing-0") == true) {
//메인페이지일때 적용할 스크립트
} else {
//메인페이지가 아닐때 적용할 스크립트
}
};
scrollEvent();뭐 이런식이면 되지않을까요?
답변에 대한 댓글 3개
님 정말 죄송한데
<script>
function scrollEvent() {
if (jQuery("body").hasClass("fp-viewing-0") == true) {
//메인페이지일때 적용할 스크립트
$('#main_header').css('display','block');
$('.nav').css('display','block');
$('#top_nav').animate({top:-100},0);
$('#top_nav').removeClass('scroll');
} else {
//메인페이지가 아닐때 적용할 스크립트
$('#main_header').css('display','none');
$('.nav').css('display','none');
$('#top_nav').animate({top:0},300);
$('#top_nav').addClass('scroll');
}
};
scrollEvent();
</script>
이렇게 작성했는데 안돼요ㅠㅠ 뭘 잘못 입력한건지 문젠지도 잘 모르겠어요 ㅠㅠ
<script>
function scrollEvent() {
if (jQuery("body").hasClass("fp-viewing-0") == true) {
//메인페이지일때 적용할 스크립트
$('#main_header').css('display','block');
$('.nav').css('display','block');
$('#top_nav').animate({top:-100},0);
$('#top_nav').removeClass('scroll');
} else {
//메인페이지가 아닐때 적용할 스크립트
$('#main_header').css('display','none');
$('.nav').css('display','none');
$('#top_nav').animate({top:0},300);
$('#top_nav').addClass('scroll');
}
};
scrollEvent();
</script>
이렇게 작성했는데 안돼요ㅠㅠ 뭘 잘못 입력한건지 문젠지도 잘 모르겠어요 ㅠㅠ
짜신 코드를 확인해보면 scrollTop값이 50보다 크거나 같다면 이라는 조건은 스크롤탑값이 50픽셀보다 클때 이니까 스크롤 이동되어 50픽셀보다 아래 있을때 조건인데 fullpage.js를 사용했으니 스크롤 1번당 페이지가 이동하므로 $(window).scrollTop()>= 50 조건은 메인페이지가 아닐때 라는 조건이 되겠고 else 는 메인페이지 일때 라는 조건이 될거같네요 그럼 및에 짠 코드랑 합쳐서 보자면..
// 스크롤이벤트가 일어났을때 scrollEvent()함수 실행
$(window).on("mousewheel DOMMouseScroll scrollstart scrollstop",function(){
scrollEvent();
});
// scrollEvent() 함수 생성
function scrollEvent() {
if (jQuery("body").hasClass("fp-viewing-0") == true) {
$('#main_header').css('display','block');
$('.nav').css('display','block');
$('#top_nav').animate({top:-100},0);
$('#top_nav').removeClass('scroll');
} else {
$('#main_header').css('display','none');
$('.nav').css('display','none');
$('#top_nav').animate({top:0},300);
$('#top_nav').addClass('scroll');
}
};
// 사이즈 조절이 일어났을때 scrollEvent 재실행
$(window).resize(function(){
scrollEvent()
});
// 새로고침 등의 리로드 이벤트시 resize 트리거로 재실행
$(window).trigger("resize")
// 스크롤이벤트가 일어났을때 scrollEvent()함수 실행
$(window).on("mousewheel DOMMouseScroll scrollstart scrollstop",function(){
scrollEvent();
});
// scrollEvent() 함수 생성
function scrollEvent() {
if (jQuery("body").hasClass("fp-viewing-0") == true) {
$('#main_header').css('display','block');
$('.nav').css('display','block');
$('#top_nav').animate({top:-100},0);
$('#top_nav').removeClass('scroll');
} else {
$('#main_header').css('display','none');
$('.nav').css('display','none');
$('#top_nav').animate({top:0},300);
$('#top_nav').addClass('scroll');
}
};
// 사이즈 조절이 일어났을때 scrollEvent 재실행
$(window).resize(function(){
scrollEvent()
});
// 새로고침 등의 리로드 이벤트시 resize 트리거로 재실행
$(window).trigger("resize")
답변을 작성하려면 로그인이 필요합니다.