Fullpage.js 插件部分位置元素

Question

我正在为我的网站使用 fullpage.js 插件。我在每个版块都放了自己的网站logo，但是刷新页面的时候，第一版块的高度会小几秒，过几版就正常了。这是我的代码：

    <html>
    <head>
        <script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage({
            sectionsColor: ['#1bbc9b', '#f5fbfd'],
            anchors: ['home', 'about'],
                navigation: true,
                scrollingSpeed: 850,
                animateAnchors: true,
                navigationPosition: 'right',
                responsiveWidth: 900,
                    afterResponsive: function(isResponsive){

                }
        });
    });
</script>
    </head>
<div id='fullpage'>
    <div class="section" id="home">
        <div class='container '>
                <img class='center-block index_logo img-responsive' style='position:relative; top:0;' src='<?php echo get_logo_by_lng();?>' />

        </div>
    </div>  
    <div class="section" id="second">
        <div class='container'>

                <img class='center-block index_logo img-responsive' style='position:relative; top:0;' src='<?php echo get_logo_by_lng();?>' />

        </div>
    </div>
</div>

</html>

问题是什么？我想我不明白如何在部分中定位元素。谢谢

Answer 1

我认为是正常的，FullPage.js格式化文档需要一些时间。

一些测试（反复点击Run）：

With a logo and With text，你也能看到正文

一个解决方案可以在FullPage.js渲染后创建淡入淡出效果：

CSS

html { opacity:0; }

JS

afterRender: function() {
    $('html').animate({'opacity': 1}, 1000);
}

The example

Fullpage.js 插件部分位置元素

Fullpage.js plugin section position element

javascript

jquery

html

css

fullpage.js