jquery.fullPage.js 如何在滚动时隐藏你的 header

Question

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

Coding for Hide header on scroll down, show on scroll up

<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>

Coding for anchors full page

<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 文档，您需要编写隐藏 header 或任何 jQuery 回调之一的代码 onLeave:

下面是演示...请查看 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');
      }
    }

  });

});

jquery.fullPage.js 如何在滚动时隐藏你的 header

jquery.fullPage.js how to enable hide your header on scroll

html

javascript

css

jquery

fullpage.js