javascript - 当正文具有使用 Fullpage.js 的类时隐藏或显示元素

标签 javascript jquery html css fullpage.js

我进行了很多搜索以尝试解决我的问题。我正在使用 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/

相关文章:

html - li元素跳出ul元素,位置: relative issue

javascript - 将 div 添加到 css 多列

javascript - 动态填充html中的json数据

php - 在 JavaScript 中使用从 MySQL 检索的数据?

javascript - 多次触发 knockout 点击事件

javascript - 如何使用 jQuery 获取 css 属性的值

javascript - 我的导航栏上的显示/隐藏按钮 Bootstrap 不起作用

php - 使用 php 和 js 的简单点击计数器

javascript - 我可以获取此代码的演练吗

javascript - 一个接一个的多个 Bootstrap Modals