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