풀페이지 모바일에서 첫페이지에 네비게이션 안보이는 오류
관련링크
본문
작업중 사이트 : 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>
잘되시면 체택 한번 부탁드립니다^^
안녕하세요.
아래의 코드를 한번 참고를 해보시겠어요~
<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>