我进行了很多搜索以尝试解决我的问题。我正在使用 Fullpage.js 库在本地构建网站。 Fullpage.js给 body 一个类,它指的是视口(viewport)中的部分。在倒数第二部分,我用下面的 CSS 代码隐藏了虚线 slider 导航。我做了一个简化的 html 结构。
<body>
<div class="section-1">
.. some content
</div>
<div class="section-2">
.. some content
</div>
<div class="section-3">
.. some content
</div>
<div class="section-4">
.. some content
</div>
<div class="section-5">
.. slider with the navigation turned off when this section is in viewport, see used css.
</div>
<div class="sectie-footer">
.. footer, navigation above reappears because this section is in viewport and css doesn't apply anymore; Body has now class fp-viewing-section-footer.
</div>
</body>
CSS:
CSS that applies to sectie-5 but not when footer is in viewport.
body.fp-viewing-section-5-0 .fp-slidesNav.fp-bottom {
display:none;
}
一切正常,但是当尝试编写一小段 jQuery 代码时,当 sectie-footer 在视口(viewport)中时,它隐藏了 sectie-5 上的这个导航元素,并且 body 具有引用页脚的类。我无法让它工作。它没有显示任何错误,但代码没有按照我的预期执行。
我已经尝试检查主体是否为 .hassClass,如果是,则使用 .addClass 添加一个类。我试过.hide 和.show,也没有效果。我写道:
jQuery(document).ready(function() {
function hideonfooter() {
jQuery('.fp-slidesNav.fp-bottom').hide();
};
if (jQuery('body').hasClass('.fp-viewing-section-footer')) {
hideonfooter();
}});
还有一些代码是我在之前关于 Stackoverflow 的问题中找到的(类 jsnoshow 有 display:none):
jQuery("fp-slidesNav").toggleClass(function() {
if ( jQuery("body").hasClass( "fp-viewing-section-footer" ) ) {
return "jsnoshow";
} else {
return "";
}
});
我也试过:
jQuery(document).ready(function() {
if (jQuery('body').hasClass('.fp-viewing-section-footer')) {
.hide('.fp-slidesNav .fp-bottom');
}});
我希望你们愿意帮助我。
最佳答案
请查看fullPage.js state classes的使用方法或 callbacks为此。
此外,不要忘记查看 the examples folder. 中的回调示例
您可能还想查看 this video tutorial我确实利用状态类来创建动画。
例如:
new fullpage('#fullpage', {
afterLoad: function(origin, destination, direction){
if(destination.index == 4){
alert("Section 4 ended loading");
}
}
});
您可以通过在回调中使用其索引在您想要的部分运行您的代码,而不是警报。
关于javascript - 当正文具有使用 Fullpage.js 的类时隐藏或显示元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58659356/