From 5c3d29352fcac43c7081465c62312d861f23a12d Mon Sep 17 00:00:00 2001 From: Kraken Date: Fri, 9 Apr 2021 10:30:50 +0200 Subject: [PATCH] Scrollbar finished New scrollbar with no lag setup finished --- Frontend/Index.html | 3 - Frontend/Javascript/HeaderFunctionality.js | 145 --------------------- Frontend/Javascript/OverlayScrollbar.js | 43 +++++- Frontend/Javascript/ScrollController.js | 21 --- 4 files changed, 40 insertions(+), 172 deletions(-) delete mode 100755 Frontend/Javascript/HeaderFunctionality.js delete mode 100644 Frontend/Javascript/ScrollController.js diff --git a/Frontend/Index.html b/Frontend/Index.html index 39e13d2..d20309f 100755 --- a/Frontend/Index.html +++ b/Frontend/Index.html @@ -700,14 +700,11 @@ - - - diff --git a/Frontend/Javascript/HeaderFunctionality.js b/Frontend/Javascript/HeaderFunctionality.js deleted file mode 100755 index 7ce20d4..0000000 --- a/Frontend/Javascript/HeaderFunctionality.js +++ /dev/null @@ -1,145 +0,0 @@ -$(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; - }); -}); \ No newline at end of file diff --git a/Frontend/Javascript/OverlayScrollbar.js b/Frontend/Javascript/OverlayScrollbar.js index edfa535..007c41d 100644 --- a/Frontend/Javascript/OverlayScrollbar.js +++ b/Frontend/Javascript/OverlayScrollbar.js @@ -1,10 +1,47 @@ +let instance; + document.addEventListener("DOMContentLoaded", function() { //The first argument are the elements to which the plugin shall be initialized //The second argument has to be at least a empty object or a object with your desired options - OverlayScrollbars(document.querySelectorAll('body'), { }); + instance = OverlayScrollbars(document.querySelectorAll('body'), { }); }); $(function() { - //The passed argument has to be at least a empty object or a object with your desired options - $('body').overlayScrollbars({ }); + + var prevScrollpos = instance.scroll().position.y; + const BackToTop = $('#return-to-top'); + + instance.options("callbacks.onScroll", function(e) { + + var currentScrollPos = instance.scroll().position.y; + if (prevScrollpos > currentScrollPos) { + //Scroll down + $("#header").css({"top" : "0"}); + } else { + //Scroll up + $("#header").css({"top" : "-50px"}); + } + + if (currentScrollPos <= 50) { + //Scroll down + BackToTop.fadeOut(300); + } else { + //Scroll up + BackToTop.fadeIn(300); + } + + prevScrollpos = currentScrollPos; + }); + + GoToTop = function() { + instance.scroll({ y : "0%" }); + + $("#header").css({"top" : "0"}); + BackToTop.fadeOut(300); + } + + // Floating button functionality + $('#return-to-top').click(function() { + GoToTop(); + }); }); \ No newline at end of file diff --git a/Frontend/Javascript/ScrollController.js b/Frontend/Javascript/ScrollController.js deleted file mode 100644 index 1f89603..0000000 --- a/Frontend/Javascript/ScrollController.js +++ /dev/null @@ -1,21 +0,0 @@ -/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */ -$(document).ready(function() { - var instance = $('body').overlayScrollbars(); - var prevScrollpos = instance.scroll().position.y; - - console.log(prevScrollpos); - - window.onscroll = function() { - - var currentScrollPos = instance.scroll().position.y; - console.log(currentScrollPos); - if (prevScrollpos > currentScrollPos) { - $("#header").css({"top" : "0"}); - } else { - $("#header").css({"top" : "-50px"}); - } - - prevScrollpos = currentScrollPos; - } - -}); \ No newline at end of file