jquery.fullPage.js 如何启用在滚动时隐藏标题

Question

我的问题涉及 fullpage.js 响应 (window).scroll 事件。 我需要在向下滚动时隐藏标题并在向上滚动时显示。一旦我应用 jquery.fullPage.min.js，标题就无法正常工作。

向下滚动时隐藏标题的编码，向上滚动时显示

<script type="text/javascript">
        $(function () {

            // Hide Header on on scroll down
            var Checkscroll;
            var LastcrollScroll = 0;
            var delta = 5;
            var menuHeight = $('header').outerHeight();


            $(window).scroll(function (event) {
                Checkscroll = true;
            });


            setInterval(function () {
                if (Checkscroll) {

                    hasScrolled();
                    Checkscroll = false;
                }
            }, 250);

            function hasScrolled() {

                var scroll = $(this).scrollTop();

                if (Math.abs(LastcrollScroll - scroll) <= delta)
                    return;

                if (scroll > LastcrollScroll && scroll > menuHeight) {
                    // Scroll to Down 
                    $('header').removeClass('navbar-header').addClass('nav-up');
                } else {
                    // Scroll to Up
                    if (scroll + $(window).height() < $(document).height()) {
                        $('header').removeClass('nav-up').addClass('navbar-header');
                    }
                }
                LastcrollScroll = scroll;
            }
        });
 </script>

全页锚点编码

<script type="text/javascript" src="Scripts/jquery.fullPage.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $('#fullpage').fullpage({
            sectionsColor: ['black', 'black', 'black', 'black'],
            anchors: ['Mainland', '2ndPage', '3rdPage', '4thpage'],
            menu: '#menu',
            css3: true,
            scrollingSpeed: 1000
        });

Answer 1

我确实浏览了 fullPage,js 文档，您需要在 onLeave 回调之一中编写隐藏标题或任何 jQuery 的代码：

下面是一个演示......请检查 https://jsfiddle.net/e8zk7hzg/

JQUERY

$(document).ready(function() {

  $('#fullpage').fullpage({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
    onLeave: function(index, nextIndex, direction) {
      var leavingSection = $(this);

      //after leaving section 2
      if (direction == 'down') {
        $('.header').fadeOut('slow');
      } else if (direction == 'up') {
        $('.header').fadeIn('slow');
      }
    }

  });

});