not so fullpage fullpage.js?

not so fullpage fullpage.js?

本文关键字：fullpage js not so      更新时间：2023-09-26

我现在正在创建一个站点，我使用fullpage.js。在我把一些图像放在背景中之前，它看起来很好（也许是因为无法判断它是否发生了）。我添加了一个背景，现在我可以看到：

  1. 在初始页面上，呈现的第一个页面/部分没有完全屏蔽（下一部分的底部和顶部有一个白色条）
  2. 当页面向上或向下调整大小时，条形图消失
  3. 将大小调整回初始大小时-没有白色条
  4. 刷新时（任何大小）-显示白色条
  5. 白色条的高度总是（在不同的监视器大小/初始窗口大小上）17px

我可以提供所有额外的信息，如屏幕截图，代码，css或任何需要的信息。

正文：

<div id="fullpage">
    <div class="section" data-anchor="top">{#top#}
        <div class="bg-photo"></div>
        <div class="content">
            <div>
                <h1>DO ROZPOCZĘCIA POZOSTAŁO</h1>
                <div class='next-event'></div>
            </div>
            <div class="joinButton">
            Dołącz do wydarzenia
            </div>
            <div class="scroll-icon">
                <img src="{{ 'assets/images/scroll_ico.png'|theme }}">
            </div>
        </div>
    </div>
    <div class="section" data-anchor="about">
        o itad + social
    </div>
</div>

css：

.bg-photo {
    background-image: url("../images/bg_blurred.png");
    background-repeat: no-repeat;
    width:100%;
    height:100%;
    background-size:cover;
    }
.content {
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    background:rgba(11,17,28,0.75);
    }

事实证明，IE运行良好，但问题出现在Firefox、Chrome和Safari上。

我尝试了一种非常简单的方法并幸运地解决了它。

添加<div id="head"></div>作为<div class="section"></div>中的第一行。

并设置css样式：

#head {
height: 1px}

所以我认为它只需要在部分的顶部添加一些元素。

相关文章：