Скрыть или показать элемент, когда тело имеет класс, используя Fullpage.js - PullRequest
Новая
       34

Скрыть или показать элемент, когда тело имеет класс, используя Fullpage.js

1 голос
/ 01 ноября 2019

Я много искал, чтобы попытаться решить мою проблему. Я строю веб-сайт локально, используя библиотеку Fullpage.js. Fullpage.js дает телу класс, который ссылается на раздел, который находится в области просмотра. Во втором последнем разделе я скрыл пунктирную навигацию ползунка с кодом ниже. Я создал упрощенную 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-5, когда второй колонтитул находится в области просмотра, а тело имеет класс, который ссылается на нижний колонтитул. Я не могу заставить его работать. Он не показывает ошибок, но код не делает то, что, как я думал, будет.

Я попытался проверить, является ли тело .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 имеет отображение: нет): 

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');
}});

Надеюсь, вы, ребята, хотите мне помочь.

1 Ответ

0 голосов
/ 01 ноября 2019

Пожалуйста, проверьте, как использовать для этого fullPage.js классы состояний или обратные вызовы .

Также не забудьте проверить примеры обратных вызовов в папка примеров.

Вы также можете проверить это видеоурок Я использовал классы состояний для создания анимаций.

Например:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        if(destination.index == 4){
            alert("Section 4 ended loading");
        }
    }
});

Вместо предупреждения вы можете запустить свой код в нужном разделе, используя его индекс в обратном вызове.

...