Question

我正在为我的网站使用fullpage.js插件。我已经在每个部分都放了我的网站标识，但是当我刷新页面时，第一部分的高度很小，持续几秒钟，而在几节之后它通常是。这是我的代码：

    <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和With text，您也可以看到该文字。

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

<强> CSS

html { opacity:0; }

<强> JS

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

The example

Fullpage.js插件部分的位置元素

1 个答案: