Question

我的问题涉及fullpage.js响应（窗口）.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');
      }
    }

  });

});

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

1 个答案: