-2

My question involves fullpage.js responding to (window).scroll events. I need hide the header on scroll down and show on scroll up. The header cannot worked well once I apply jquery.fullPage.min.js.

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

Alvaro
  • 37,936
  • 23
  • 138
  • 304
max
  • 3
  • 4
  • please post what you have tried.. – Anoop LL Feb 23 '16 at 06:53
  • you have to make use of mousewheel events – RRR Feb 23 '16 at 06:56
  • @AnoopLL , this is roughly what i have done. Hope you can understand on it. Thank you. – max Feb 23 '16 at 07:10
  • @max check the following fiddle https://jsfiddle.net/hykktL2e/ and try something similar – RRR Feb 23 '16 at 07:15
  • @RRR , the result is still the same. when i remove the jquery.fullPage.min.js from my script , the header can work properly. I refer 'jquery.fullPage.min.js' from http://alvarotrigo.com/fullPage/#firstPage . I guess it is because scroll part is conflict. – max Feb 23 '16 at 07:27

1 Answers1

1

Well I did go through fullPage,js documentation you need to write the code for hiding header or any jQuery in one of the callbacks onLeave:

below is a demo... kindly check 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');
      }
    }

  });

});
RRR
  • 984
  • 7
  • 11