javascript - Fullpage.js 插件部分位置元素-6ren

javascript - Fullpage.js 插件部分位置元素

转载作者：太空宇宙更新时间：2023-11-04 08:10:09

24

4

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

    <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>

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

最佳答案

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

一些测试(重复点击 Run):

With a logo和 With text ，您也可以看到文字。

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

CSS

html { opacity:0; }

JS

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

The example

关于javascript - Fullpage.js 插件部分位置元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46352491/

24

4

0

文章推荐： css - Scrapy Selector CSS 不返回子节点

文章推荐： c - 从 .txt 文件中读取随机行

文章推荐： c - 导航基本二叉树

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

javascript - Fullpage.js 插件部分位置元素