Parameters

function()

{ $('#navbar').addClass('animated fadeIn slow');function setSticky(domElement, stickTo, offset) { if(domElement) { console.log('domElement:'+domElement);} else { console.error('Unable to setSticky - domElement is null or undefined:'+domElement);alert('Unable to setSticky - domElement is null or undefined:'+domElement);} if(!stickTo) { console.error('Unable to setSticky - stickTo is null or undefined:'+stickTo);alert('Unable to setSticky - stickTo is null or undefined:'+stickTo);} if(!offset) offset=0;.scroll(function() { if(.scrollTop() > .outerHeight()) { $('#'+domElement).addClass('fixed-top shadow');var navbar_height=$('.'+domElement).outerHeight();$('body').css('padding-top', navbar_height+ 'px');} else { $('#'+domElement).removeClass('fixed-top');$('body').css('padding-top', 0);} });} setSticky('navbar', '#intro', 0);setSticky('MySidebar', '#intro', 100);$('#subMenu li').click(function(e) { e.preventDefault();var linkObject=.find('a');var href=linkObject.attr('href');var target=linkObject.attr('target');if(href.charAt(0)==='#') { try { $('html, body').velocity('scroll', { offset:.offset().top - 250, duration:2400, easing:'easeOutQuart' });} catch(error) { console.log('Info:Velocity.js is not loaded. Please consider loading velocity.js within the template assets if you want the smoothest scroll experience. Error message:', error.message);$('html, body').animate({ scrollTop:.offset().top - 250 }, 2400);} } else { if(target) { window.open(href, target);} else { window.open(href, '_self');} } });$('.scrollup').click(function() { try{ $("html, body").velocity("scroll", { duration:2400, easing:"easeOutExpo" });} catch { console.log('Error:Velocity.js is not loaded. Please consider loading velocity.js within the assets if you want the smoothest scroll experience. Error message:', error.message);$("html, body").animate({scrollTop:0}, 1200);} });$('#darkMode').click(function() { var id=$('#darkMode').data('id');document.cookie='frontendSwitchID='+id;});$('#lightMode').click(function() { var id=$('#lightMode').data('id');document.cookie='frontendSwitchID='+id;});.scroll(function() { var screenWidth=.width();var scrollTop=.scrollTop();var fadeOutValue=1 -(scrollTop/(screenWidth/3));$(".scrollDownFadeOut").css("opacity", fadeOutValue);});var $scrollingDiv=$("#scrollingDiv");.scroll(function() { $scrollingDiv.stop().animate({"marginTop":(.scrollTop())}, 0);});$(".sliding-link").click(function(e) { e.preventDefault();var aid=.attr("href");$('html, body').animate({scrollTop:.offset().top - 150}, 'slow');window.location.hash=aid;});$(function() { $('[data-toggle="tooltip"]').tooltip();});const options={ controlColor:"#FFFFFF", controlShadow:true, addCircle:true, addCircleBlur:true, showLabels:true, labelOptions:{ before:'Before', after:'After', onHover:true }, smoothing:true, smoothingAmount:80, hoverStart:true, verticalMode:false, startingPoint:50, fluidMode:false };$('.image-compare').each(function() { let view=new ImageCompare(this, options).mount();});} fadeInNavbar adds a fadeIn animation to the navbar on page load

you can change the animation type and speed by changing the class name Take a look at https://daneden.github.io/animate.css/ for a list of all available animations

setSticky makes a navbar sticky on scroll

this is achieved by adding a fixed-top class to the navbar

Parameters

domElement	the id of the navbar element
stickTo	the id of the element to stick to
offset	the offset in px to stick to

if enabled, this will set a cookie to remember the user choice of dark or light mode this code sets the cookie for the frontend switch

this code will fade out an element on scroll down

this works well with images, like a carousel on top of the page that fades out on scroll down If you want to use this, add a div with class="scrollDownFadeOut" or add scrollDownFadeOut class to any element.

this code will add a tooltip to any element with data-toggle="tooltip"

this works well with any elemnt that has a title attribute

import image compare viewer

this will add a before/after image comparison slider to any element with class="image-compare" take a look at the options below to customize the slider

References e, error, id, and window.