Game-Jaming/Frontend/Javascript/HeaderFunctionality.js

145 lines
4.4 KiB
JavaScript
Raw Normal View History

2021-03-15 13:03:29 +00:00
$(document).ready(function() {
const scrollableObj = document.getElementById('content');
var scrollBar = new MiniBar('#content', {
barType: "default",
scrollX: false,
scrollY: true,
scrollAmount: 20,
onScroll: function() {
// Resize header on scroll.
if($('.smart-scroll').length > 0) {
scrollableObj.addEventListener('wheel', ScrollDirection);
const NavCollapse = document.getElementById('navbarSupportedContent');
const BackToTop = $('#return-to-top');
const nav = $('.smart-scroll');
const body = $('body');
const container = document.querySelector('.mb-content');
if (container.scrollTop <= 0)
{
body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
nav.removeClass('scrolled-down').addClass('scrolled-up');
BackToTop.fadeOut(300);
scrollBar.update();
}
function ScrollDirection(event) {
var delta;
if (event.wheelDelta)
{
delta = event.wheelDelta;
}
else
{
delta = -1 * event.deltaY;
}
if (delta < 0)
{
body.removeClass('bodyScrolled-up').addClass('bodyScrolled-down');
nav.removeClass('scrolled-up').addClass('scrolled-down');
BackToTop.fadeIn(300);
NavCollapse.classList.remove('show');
scrollBar.update();
}
else if (delta > 0)
{
body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
nav.removeClass('scrolled-down').addClass('scrolled-up');
BackToTop.fadeOut(300);
scrollBar.update();
}
}
}
}
});
$('body').onSwipe(function(results) {
const NavCollapse = document.getElementById('navbarSupportedContent');
const BackToTop = $('#return-to-top');
const nav = $('.smart-scroll');
const body = $('body');
if (results.up)
{
body.removeClass('bodyScrolled-up').addClass('bodyScrolled-down');
nav.removeClass('scrolled-up').addClass('scrolled-down');
BackToTop.fadeIn(300);
NavCollapse.classList.remove('show');
}
if (results.down)
{
body.removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
nav.removeClass('scrolled-down').addClass('scrolled-up');
BackToTop.fadeOut(300);
}
})
GoToTop = function() {
scrollBar.scrollToTop();
// Show the Navbar on click.
$('#header').removeClass('scrolled-down').addClass('scrolled-up');
$('body').removeClass('bodyScrolled-down').addClass('bodyScrolled-up');
$('#return-to-top').fadeOut(300);
}
// Floating button functionality
$('#return-to-top').click(function() {
GoToTop();
});
// Smooth scrolling when click to nav
$('.NavLink').click(function(e) {
// Target element id.
var id = $(this).attr('href');
// Target element.
var $id = $(id);
// If no id was provided, return nothing.
if ($id.length === 0)
{
return;
}
// Prevent standard hash navigation (avoid blinking in IE).
e.preventDefault();
// Top position relative to the document.
var pos = $id.position().top;
if (pos >= 0)
{
$('#return-to-top').fadeIn(300);
}
// Animated top scrolling.
if (pos === 0)
{
scrollBar.scrollTo(pos, 'y');
}
else if (pos > 0)
{
scrollBar.scrollBy(pos, 'y');
}
else if (pos < 0)
{
scrollBar.scrollBy(pos, 'y');
}
// Hide the Navbar on click.
$('#header').addClass('scrolled-down');
$('body').addClass('bodyScrolled-down');
return;
});
});