고수님들 제발 도와주세요 ㅜㅜ script 관련! 채택완료
초보퍼블리셔율
6년 전
조회 5,616
링크 같이 올려드려요 해결 방법을 도저히 모르겠는데 제발 도와주세요 ㅠㅠ
<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개
채택된 답변
+20 포인트
6년 전
$(window).scrollTop() 이 계속 0이네요
console.log($(window).scrollTop()) 찍어보시면 0만나와요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
�
초보퍼블리셔율
6년 전
scrollTop 말고 body에 class 달라질때 바뀌는 방법 없나요..? ㅠㅠ 어떻게든 적용을 시켜야하는데 방법을 몰라서 며칠째 헤매고 있어요 ㅠㅠ
�
아르키어드
6년 전
저도 직접짜봐가며 해봐야 알겠지만.. each문으로 돌리면 될거같긴한데요.. 아 혹시
위에 if문 에서 돌아가는애들이 1페이지 즉 메인페이지가 아닌곳에서 적용되는건가요? else문이 메인페이지일때 이고?
위에 if문 에서 돌아가는애들이 1페이지 즉 메인페이지가 아닌곳에서 적용되는건가요? else문이 메인페이지일때 이고?
�
초보퍼블리셔율
6년 전
each문이요? 딱 어떻게 해야하는구나 하는 생각이 바로 드시는군요..ㅠㅠ 음 그니까 스크롤을 내리면 해더랑 콘텐츠 글자가 사라지고 #top_nav창이 나타나게 하고 싶은거에요~ if문일때 메인페이지가 아닌곳에 적용되는지 이 말이 뭔지 잘 모르겠어요 ㅠㅠ 죄송합니다 제가 진짜 생 초짜라 ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
6년 전
님들 해결됐어요~ 아래처럼 하니까 되더라구요! 다들 너무 감사합니다!!
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);
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
6년 전
</p>
<p>function scrollEvent() {</p>
<p> if (jQuery("body").hasClass("fp-viewing-0") == true) {</p>
<p> //메인페이지일때 적용할 스크립트</p>
<p> } else {</p>
<p> //메인페이지가 아닐때 적용할 스크립트</p>
<p> }</p>
<p>};</p>
<p>scrollEvent();</p>
<p>
뭐 이런식이면 되지않을까요?
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
�
초보퍼블리셔율
6년 전
오 한번 적용해서 해볼게요! 감사합니다!
�
초보퍼블리셔율
6년 전
님 정말 죄송한데
<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>
이렇게 작성했는데 안돼요ㅠㅠ 뭘 잘못 입력한건지 문젠지도 잘 모르겠어요 ㅠㅠ
�
아르키어드
6년 전
짜신 코드를 확인해보면 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")
댓글을 작성하려면 로그인이 필요합니다.
6년 전
링크를 참고해서 보세요.....도움이 될수도 있을거 같습니다.
https://www.webtipblog.com/adding-scroll-top-button-website/
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
초보퍼블리셔율
6년 전
감사합니다! 참고해서 봐볼게요 ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인