Scrollbar finished
New scrollbar with no lag setup finished
This commit is contained in:
parent
d9530f8be1
commit
5c3d29352f
|
@ -700,14 +700,11 @@
|
||||||
<!-- Footer end -->
|
<!-- Footer end -->
|
||||||
<!-- Body scripts -->
|
<!-- Body scripts -->
|
||||||
<script src="Javascript/OverlayScrollbar.js"></script>
|
<script src="Javascript/OverlayScrollbar.js"></script>
|
||||||
<script src="Javascript/ScrollController.js"></script>
|
|
||||||
|
|
||||||
<script src="Javascript/Collapsible.js"></script>
|
<script src="Javascript/Collapsible.js"></script>
|
||||||
<script src="Javascript/PasswordValidation.js"></script>
|
<script src="Javascript/PasswordValidation.js"></script>
|
||||||
<script src="Javascript/Kalender.js"></script>
|
<script src="Javascript/Kalender.js"></script>
|
||||||
<script src="Javascript/SpinningWheel.js"></script>
|
<script src="Javascript/SpinningWheel.js"></script>
|
||||||
<script src="Javascript/minibar.min.js"></script>
|
<script src="Javascript/minibar.min.js"></script>
|
||||||
<!-- <script src="Javascript/HeaderFunctionality.js"></script> -->
|
|
||||||
<script src="Javascript/LoginFunctionality.js"></script>
|
<script src="Javascript/LoginFunctionality.js"></script>
|
||||||
<!-- Body scripts end -->
|
<!-- Body scripts end -->
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -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;
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -1,10 +1,47 @@
|
||||||
|
let instance;
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
//The first argument are the elements to which the plugin shall be initialized
|
//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
|
//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() {
|
$(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();
|
||||||
|
});
|
||||||
});
|
});
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
Loading…
Reference in New Issue