고수님들 제발 도와주세요 ㅜㅜ script 관련!
관련링크
본문
링크 같이 올려드려요 해결 방법을 도저히 모르겠는데 제발 도와주세요 ㅠㅠ
답변 4
$(window).scrollTop() 이 계속 0이네요
console.log($(window).scrollTop()) 찍어보시면 0만나와요
scrollTop 말고 body에 class 달라질때 바뀌는 방법 없나요..? ㅠㅠ 어떻게든 적용을 시켜야하는데 방법을 몰라서 며칠째 헤매고 있어요 ㅠㅠ
저도 직접짜봐가며 해봐야 알겠지만.. each문으로 돌리면 될거같긴한데요.. 아 혹시
위에 if문 에서 돌아가는애들이 1페이지 즉 메인페이지가 아닌곳에서 적용되는건가요? else문이 메인페이지일때 이고?
each문이요? 딱 어떻게 해야하는구나 하는 생각이 바로 드시는군요..ㅠㅠ 음 그니까 스크롤을 내리면 해더랑 콘텐츠 글자가 사라지고 #top_nav창이 나타나게 하고 싶은거에요~ if문일때 메인페이지가 아닌곳에 적용되는지 이 말이 뭔지 잘 모르겠어요 ㅠㅠ 죄송합니다 제가 진짜 생 초짜라 ㅠㅠ
감사합니다! 참고해서 봐볼게요 ㅠㅠ
function scrollEvent() {
if (jQuery("body").hasClass("fp-viewing-0") == true) {
//메인페이지일때 적용할 스크립트
} else {
//메인페이지가 아닐때 적용할 스크립트
}
};
scrollEvent();
뭐 이런식이면 되지않을까요?
오 한번 적용해서 해볼게요! 감사합니다!
님 정말 죄송한데
<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")
님들 해결됐어요~ 아래처럼 하니까 되더라구요! 다들 너무 감사합니다!!