Korbs/Vacy
Archived
1
Fork 0
Code Issues Pull requests Activity

Add background when scrolling pass page title

Browse source
This commit is contained in:
Korbs 2022-05-02 16:01:49 -04:00
parent 3bc2f1fadb
commit 0d1a95e2be
3 changed files with 21 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
_includes/master/head.html
View file

@ -5,5 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
<script src="/assets/js/scroll-header.js"></script>
<script src="https://kit.fontawesome.com/fc093d7fbf.js" crossorigin="anonymous"></script>
</head>

3
_includes/master/header.html
View file

@ -16,4 +16,5 @@
<a href="https://www.youtube.com/c/blueanimates" target="_blank"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
</header>
</header>
<hb></hb>

18
assets/js/scroll-header.js Normal file
View file

@ -0,0 +1,18 @@
window.onscroll = function() {headerScroll()};
function headerScroll() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop > 0 && scrollTop < 60) {
document.querySelector('#for-banner').style.opacity = '1';
}
if (scrollTop > 60 && scrollTop < 5000) {
document.querySelector('#for-banner').style.opacity = '0';
}
if (scrollTop > 0 && scrollTop < 129) {
document.querySelector('hb').style.backgroundColor = 'transparent';
}
if (scrollTop > 130 && scrollTop < 5000) {
document.querySelector('hb').style.backgroundColor = 'var(--blue)';
}
}