Question

我正在使用具有粘性标题的网站上的fullpage.js。我希望整页部分为100vh减去粘性标题的高度，以便当用户滚动部分时标题可见，但默认功能只是使部分100vh无论如何。我查看了偏移扩展，但这只允许百分比偏移，我需要偏移量是标题高度的确切像素值。这里有什么想法吗？

Answer 1

如果发现这个小提琴： http://jsfiddle.net/6SQhb/514/

在整页div上方添加一个标题：

<header id="header">
    <ul class="nav">
        <li> <a href="#home">home</a></li>
        <li><a href="#about">about</a></li>
    </ul>
</header>
<div id="fullpage">
....
</div>

有了这个Css：

#header {
 width: 100%;
 background-color: #42403c;
 background: rgba(0, 0, 0, 0.7);
 position: fixed;
 height: 50px;
 top: 0;
 z-index: 99;
}

别忘了添加此选项：

$('#fullpage').fullpage({
  //other options here
  paddingTop: '50px'
});

您还可以在＆＃39;整页＆＃39;中设置保证金顶部。 div所以你不必担心百分比。希望有所帮助。

Answer 2

是的，我遇到了同样的问题，但我没有找到任何解决方案。作为替代方案，我只在第一部分显示标题，并从其他部分导航，我启用了导航工具提示选项。

CSS：

.fp-viewing-* .header-wrapper{
        display:none;
        transition: all 1.1s ease-out;
}
.fp-viewing-home .header-wrapper{
        display:block;
        transition: all 1.1s ease-out;
}

JS：

new fullpage('#fullpage', {
    //options here
    navigation:true,
    anchors:['home','about','pricing','contact-us'],
    navigationTooltips:['Home','About','Pricing','Contact Us'],
    showActiveTooltip:true,
});

使用fullpage.js粘贴标题

2 个答案: