我正在为我的网站使用 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);
}
关于javascript - Fullpage.js 插件部分位置元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46352491/