Game-jam-Devs/Game-Jaming
Game-jam-Devs
/
Game-Jaming
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Scrollbar finished 

New scrollbar with no lag setup finished
This commit is contained in:
Kraken 2021-04-09 10:30:50 +02:00
parent d9530f8be1
commit 5c3d29352f
4 changed files with 40 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Frontend/Index.html
View File

@ -700,14 +700,11 @@
<!-- Footer end -->
<!-- Body scripts -->
<script src="Javascript/OverlayScrollbar.js"></script>
<script src="Javascript/ScrollController.js"></script>
<script src="Javascript/Collapsible.js"></script>
<script src="Javascript/PasswordValidation.js"></script>
<script src="Javascript/Kalender.js"></script>
<script src="Javascript/SpinningWheel.js"></script>
<script src="Javascript/minibar.min.js"></script>
<!-- <script src="Javascript/HeaderFunctionality.js"></script> -->
<script src="Javascript/LoginFunctionality.js"></script>
<!-- Body scripts end -->
</body>

145
Frontend/Javascript/HeaderFunctionality.js
View File

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

43
Frontend/Javascript/OverlayScrollbar.js
View File

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

21
Frontend/Javascript/ScrollController.js
View File

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