2015-04-26 56 views
0

我正在一个完整的页面网站上,并决定使用Fullpage.js插件,但我在通过AJAX请求加载内容方面存在一些问题。我使用JSON内容填充页面,出于某种原因,scrollOverflow选项无法正常工作。更有趣的是,它在XAMPP环境中工作得非常好,但在实时托管环境(Bluehost)中失败。我有一种感觉网站资源没有被正确加载,但我不确定这是否会导致问题。没有控制台错误,并且正在加载所有资源。FullPage.js scrollOverflow无法正常加载内容

初始化:

$(document).ready(function() { 
$.ajax({ 
    type: 'POST', 
    url: 'content.json', 
    dataType: 'json', 
    contentType: "text/json; charset=utf-8", 
    success: function(e) { 
     $('.slide').each(function(index){ 
      console.log(index); 
      $(this).children('.fp-tableCell').html('<span class = "center"><div class="circle-logo"><div class="circle-fill"><i class="'+e.platform[index].i+'"></i></div></div><h1 class = "montserrat">'+e.platform[index].h+'</h1><p class = "hind">'+e.platform[index].p+'</p><span>'); 
     }); 
     for(var i = 0; i<e.about.length; i++){ 
      $('#section2').children('.fp-tableCell').append('<h2 class = "montserrat">'+e.about[i].h+'</h2><p class = "hind">'+e.about[i].p+'</p>'); 
     } 
     $('#section2').children('.fp-tableCell').append('<hr>'); 
     $('#section2').children('.fp-tableCell').append('<p class = "hind">CRAFTED BY DAVE | &copy; NATHAN</p>'); 
    }, 
    error: function(e){ 
     console.log(e); 
    } 
}); 

$('#downhint').click(function(){ 
    console.log('click'); 
    $.fn.fullpage.moveSectionDown(); 
}); 

$('#fullpage').fullpage({ 
    sectionsColor: ['transparent', '#021b80', '#FFF'], 
    anchors: ['landing', 'platform', 'about'], 
    menu: '#menu', 
    scrollOverflow: true, 
    slidesNavigation: true, 
    afterLoad: function(anchorLink, index){ 

     $('.fp-table .active').css('overflow-y','auto'); 

     if(index == 1){ 
      $('#menu li:nth-child(1) a').addClass('active-link'); 
      $('#menu li:not(:nth-child(1)) a').removeClass('active-link'); 
     } 
     if(index == 2){ 
      $('#menu li:nth-child(2) a').addClass('active-link'); 
      $('#menu li:not(:nth-child(2)) a').removeClass('active-link'); 
     } 
     if(index == 3){ 
      $('#menu li:nth-child(3) a').addClass('active-link'); 
      $('#menu li:not(:nth-child(3)) a').removeClass('active-link'); 
     } 

    } 
}); 
$(window).scroll 
}); 

包括:

<link rel="stylesheet" type="text/css" href="css/index.css" /> 

    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 
    <link href='http://fonts.googleapis.com/css?family=Hind' rel='stylesheet' type='text/css'> 
    <link href='css/bootstrap.min.css' rel='stylesheet' type='text/css'> 
    <link href='fonts/genericons/genericons/genericons.css' rel='stylesheet' type='text/css'> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript" src="js/jquery.slimscroll.min.js"></script> 
    <script type="text/javascript" src="fullpage/jquery.fullPage.js"></script> 

从我可以告诉我已经加载的所有必需的文件和脚本。提前致谢。

+0

定义您的意思*“scrollOverflow选项无法正常工作”*。 – Alvaro

+0

我有垂直溢出的内容(y轴)。滚动条未被创建,因此该部分内的内容不可滚动。内容是通过AJAX请求在第2行开始生成的。我需要让滚动条初始化并使内容能够滚动。 @Alvaro –

回答

1

根据您的最新评论。 您需要在将新内容加载到DOM结构后立即调用$.fn.fullpage.reBuild()

这样,fullpage.js将重新计算内容大小并在必要时创建滚动条。

the docs

重建() 更新DOM结构以适应新的窗口大小或它的内容。 理想与AJAX结合使用调用或网站的DOM结构中的外部更改。