풀페이지 모바일에서 첫페이지에 네비게이션 안보이는 오류
관련링크
본문
작업중 사이트 : http://xn--jk1bya70dt6z6knwvgruc.net/
오른쪽 일곱개의 동그란 네비게이션이 모바일에서 첫페이지에서 보이지 않아 사용자가 밑에 내용이 더 있는지 모른다고 하더라구요.
개발할때 6번째 section에서 네비가 안보이게 하는것을 요청하긴 했었는데 맨첫섹션에서도 보이지 않는것을 뒤늦게 알았습니다. 스크롤 내렸다가 다시 올리면 다시 생기구요..
아래 script중 onLeave: function 부분이 보여졌다 안보여졌다 하는 부분인것 같은데 건드리진 못하구요..
혹시 방법이 있을까요? 무지랭이 울고갑니다. ㅠㅠ 감사합니다 :)
<script>
$(document).ready(function() {
//activate wow.js
new WOW().init();
//activate fullpage.js
$('#fullpage').fullpage({
lockAnchors:true,
menu: '#fp-nav',
anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7'],
scrollBar: true,
navigation: true,
navigationTooltips: ['','','','','','',''],
loopBottom: true,
sectionSelector: 'section',
loopBottom: false,
normalScrollElements:'.view_box_con',
responsiveWidth: 600,
onLeave: function(origin, destination, direction, trigger){
if(destination>=6) {
$('#fp-nav').fadeOut();
$('.gnb_top').fadeOut();
} else {
$('#fp-nav').fadeIn();
$('.gnb_top').fadeIn();
}
}
});
//apply color to each section from array
int = -1;
color_array = ['#4890ff','#0abf7a','#f05f32','#6662ff','#006cff','#353c44','#0d0d0d'];
$('section').each(function(){
int++
$(this).addClass('grid-item-' + int).css('background-color', color_array[int]);
});
$('.firstSection').click(function() {
$.fn.fullpage.moveTo(1);
});
$('.checkSection').click(function() {
$.fn.fullpage.moveTo(6);
});
});
</script>
답변 2
네비게이션의 처음 상태가 숨겨진 상태여서 그렇습니다.
간단하게 이렇게 한번 해보세요.
<script>
$(document).ready(function() {
//activate wow.js
new WOW().init();
//activate fullpage.js
$('#fp-nav').fadeIn();
$('.gnb_top').fadeIn();
$('#fullpage').fullpage({
lockAnchors:true,
menu: '#fp-nav',
anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7'],
scrollBar: true,
navigation: true,
navigationTooltips: ['','','','','','',''],
loopBottom: true,
sectionSelector: 'section',
loopBottom: false,
normalScrollElements:'.view_box_con',
responsiveWidth: 600,
onLeave: function(origin, destination, direction, trigger){
if(destination>=6) {
$('#fp-nav').fadeOut();
$('.gnb_top').fadeOut();
} else {
$('#fp-nav').fadeIn();
$('.gnb_top').fadeIn();
}
}
});
//apply color to each section from array
int = -1;
color_array = ['#4890ff','#0abf7a','#f05f32','#6662ff','#006cff','#353c44','#0d0d0d'];
$('section').each(function(){
int++
$(this).addClass('grid-item-' + int).css('background-color', color_array[int]);
});
$('.firstSection').click(function() {
$.fn.fullpage.moveTo(1);
});
$('.checkSection').click(function() {
$.fn.fullpage.moveTo(6);
});
});
</script>
잘되시면 체택 한번 부탁드립니다^^
답변 주셔서 감사합니다~ 하지만 방법으로 해보았지만 해결되지 않았습니다. ㅜㅜ
헉 댓글 확인했습니다.
핵심은 모바일에서 처음 상태일 때 숨겨진 상태라는 것입니다.
해당 부분을 확인하시어 css/js 로 처음 상태를 보여지는 상태로 변경하면 됩니다.
안녕하세요.
아래의 코드를 한번 참고를 해보시겠어요~
<script>
$(document).ready(function() {
//activate wow.js
new WOW().init();
//activate fullpage.js
$('#fullpage').fullpage({
lockAnchors: true,
menu: '#fp-nav',
anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7'],
scrollBar: true,
navigation: true,
navigationTooltips: ['','','','','','',''],
loopBottom: true,
sectionSelector: 'section',
loopBottom: false,
normalScrollElements: '.view_box_con',
responsiveWidth: 600,
afterRender: function(){
if ($(window).width() <= 600) {
$('#fp-nav').fadeIn(); // Ensure nav is visible on initial load for mobile
}
},
onLeave: function(origin, destination, direction, trigger){
if (destination.index >= 5) {
$('#fp-nav').fadeOut();
$('.gnb_top').fadeOut();
} else {
$('#fp-nav').fadeIn();
$('.gnb_top').fadeIn();
}
}
});
//apply color to each section from array
var int = -1;
var color_array = ['#4890ff','#0abf7a','#f05f32','#6662ff','#006cff','#353c44','#0d0d0d'];
$('section').each(function(){
int++;
$(this).addClass('grid-item-' + int).css('background-color', color_array[int]);
});
$('.firstSection').click(function() {
$.fn.fullpage.moveTo(1);
});
$('.checkSection').click(function() {
$.fn.fullpage.moveTo(6);
});
});
</script>
해당방법으로 해보았지만 해결되지 않았습니다만 답변 정말 감사드립니다.
