xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="utf-8">5
<title>Test</title>6
<meta http-equiv="x-ua-compatible" content="ie=edge">7
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">8
</head>9
<body class="fixed-sn mdb-skin-custom" aria-busy="true" data-offset="15" data-target="#scrollspy" data-spy="scroll">10
<main>11
<div class="container-fluid mt-2">12
<div class="row">13
<div id="preloader" class="container-fluid h-50vh" style="display:block;">14
<div class="row h-100">15
<div class="w-100 h-100 m-auto flex-center">16
<!-- Card -->17
<div class="spinner-border circle-radius-205 p-absolute" role="status">18
<span class="sr-only">Loading...</span>19
</div>20
<div class="card circle circle-radius-200">21
<!-- Card content -->22
<div class="card-body flex-center">23
<!-- Title -->24
25
</div>26
</div>27
<!-- Card -->28
</div>29
</div>30
</div> 31
<div id="chart-content" class="col-lg-10 col-md-12" style="display: none;">32
</div>33
<!-- Grid Column: Scrollspy -->34
<div id="dash-nav" class="col-md-2" style="display: none;">35
<!-- Sticky Content -->36
<div class="sticky">37
<!-- Scrollspy -->38
<div id="scrollspy">39
<!-- Links -->40
<ul class="nav nav-pills default-pills smooth-scroll" data-allow-hashes>41
<li class="nav-item wow bounceIn animated" data-wow-delay="0.3s">42
<a class="nav-link" href="#curr-month-chart">Current Month</a>43
</li>44
<ul class="nav pl-3" data-allow-hashes="">45
<li class="nav-item pl-1 wow bounceIn animated" data-wow-delay="0.4s">46
<a class="nav-link" href="#curr-month-comp">Comparisons</a>47
</li>48
<li class="nav-item pl-1 wow bounceIn animated" data-wow-delay="0.5s">49
<a class="nav-link" href="#curr-month-billed-chart">Total Billed Analysis</a>50
</li>51
<li class="nav-item pl-1 wow bounceIn animated" data-wow-delay="0.6s">52
<a class="nav-link" href="#curr-month-char-chart">Char Hours Analysis</a>53
</li>54
<li class="nav-item pl-1 wow bounceIn animated" data-wow-delay="0.7s">55
<a class="nav-link" href="#curr-month-billing-chart">Billings Analysis</a>56
</li>57
</ul>58
<li class="nav-item wow bounceIn animated" data-wow-delay="0.3s">59
<a class="nav-link" href="#year-on-year-chart">Year-On-Year</a>60
</li>61
<ul class="nav pl-3" data-allow-hashes>62
<li class="nav-item pl-1 wow bounceIn animated" data-wow-delay="0.4s">63
<a class="nav-link" href="#year-on-year-comp">Comparisons</a>64
</li>65
<li class="nav-item pl-1 wow bounceIn animated" data-wow-delay="0.5s">66
<a class="nav-link" href="#year-on-year-billed-chart">Total Billed Analysis</a>67
</li>68
<li class="nav-item pl-1 wow bounceIn animated" data-wow-delay="0.6s">69
<a class="nav-link" href="#year-on-year-char-chart">Char Hours Analysis</a>70
</li>71
<li class="nav-item pl-1 wow bounceIn animated" data-wow-delay="0.7s">72
<a class="nav-link" href="#year-on-year-billing-chart">Billings Analysis</a>73
</li>74
</ul>75
</ul>76
</div>77
</div>78
</div>79
</div>80
</div>81
</main>82
<footer id="footer" class="page-footer mt-4">83
<div class="text-center py-4">84
85
</div>86
</footer>87
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>88
</body>89
</html>xxxxxxxxxx1
#scrollspy {2
width:100%;3
}4
5
#scrollspy .nav-item {6
width:100%;7
}8
9
#scrollspy a {10
font-size: .8rem;11
font-weight: 400;12
line-height: 1.1rem;13
padding: 0 5px;14
margin-top: 3px;15
margin-bottom: 3px;16
color: #00017
}18
19
#scrollspy li .active {20
font-weight:600;21
}xxxxxxxxxx1
$(document).ready(function() {2
$('#preloader').addClass('animated fadeOut slow delay-2s').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {3
$(this).remove();4
$('#chart-content, #dash-nav').addClass('animated fadeIn').show(); 5
});6
});7
8
$(function() {9
$(".sticky").sticky({10
topSpacing: 90,11
zIndex: 2,12
stopper: "#footer"13
});14
}); Console errors: 0