ross/slowtwitch-news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sticky header

Browse Source
This commit is contained in:
Ross Trottier 2024-06-21 10:57:39 -06:00
parent 74188a838d
commit 6cb0c42521
3 changed files with 43 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/js/st-nav.js
View File

@ -1,3 +1,5 @@
//Nav slide in logic
const nav = document.querySelector('.st-nav'); const nav = document.querySelector('.st-nav');
const openButton = document.querySelector('.st-open-nav'); const openButton = document.querySelector('.st-open-nav');
const closeButton = document.querySelector('.st-close-nav'); const closeButton = document.querySelector('.st-close-nav');
@ -10,10 +12,24 @@ closeButton.addEventListener('click', () => {
nav.classList.remove('st-nav-is-open'); nav.classList.remove('st-nav-is-open');
}); });
//Sticky nav logic
const iconBar = document.querySelector('.st-header-icon-bar');
const siteTitle = document.querySelector('.st-site-title');
let lastScrollPosition = 0; let lastScrollPosition = 0;
window.addEventListener('scroll', function(event) { window.addEventListener('scroll', function(event) {
const scrollPosition = window.scrollY; const scrollPosition = window.scrollY;
console.log(scrollPosition);
if(scrollPosition < 5) {
iconBar.classList.remove('st-icon-bar-sticky');
siteTitle.classList.remove('st-title-scrolled');
} else {
if(lastScrollPosition < 5) {
iconBar.classList.add('st-icon-bar-sticky');
siteTitle.classList.add('st-title-scrolled');
}
}
lastScrollPosition = scrollPosition; lastScrollPosition = scrollPosition;
}); });

3
header.php
View File

@ -29,9 +29,8 @@
<a href="" class="st-header-icon"><i class="fa fa-search"></i></a> <a href="" class="st-header-icon"><i class="fa fa-search"></i></a>
<button class="st-nav-btn st-open-nav" aria-label="Open Navigation">&#9776;</button> <button class="st-nav-btn st-open-nav" aria-label="Open Navigation">&#9776;</button>
</div> </div>
<h1 class="st-site-title">Slowtwitch</h1>
<h1 class="st-site-title">Slowtwitch</h1>
<nav class="st-nav st-main-grid"> <nav class="st-nav st-main-grid">
<button class="st-nav-btn st-close-nav" aria-label="Close Navigation">&times;</button> <button class="st-nav-btn st-close-nav" aria-label="Close Navigation">&times;</button>

30
style.css
View File

@ -42,6 +42,13 @@ h1 {
text-align: center; text-align: center;
margin-top: 0; margin-top: 0;
font-size: 3.3rem; font-size: 3.3rem;
transform: scale(1, 1) translateX(0);
transition: all 300ms;
transform-origin: top left;
}
.st-title-scrolled {
transform: scale(0,0);
} }
/* /*
@ -66,8 +73,13 @@ SECTIONS
*/ */
/* header bar */ /* header bar */
.st-header {
position: sticky;
top: 0;
}
.st-header-icon-bar { .st-header-icon-bar {
width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color: black; color: black;
@ -84,10 +96,22 @@ SECTIONS
color: black; color: black;
} }
.st-icon-bar-sticky a {
display: none;
}
.st-icon-bar-sticky .st-open-nav {
border-radius: 20%;
padding: .1em .4em;
background: #fff;
box-shadow: 0 0 3px rgb(0 0 0 / 30%);
margin-left: auto;
}
/* nav */ /* nav */
.st-nav { .st-nav {
position: absolute; position: fixed;
background: #fff; background: #fff;
width: 100%; width: 100%;
top: 0; top: 0;
@ -99,10 +123,6 @@ SECTIONS
grid-template-rows: minmax(2.25rem, 3rem) 1fr; grid-template-rows: minmax(2.25rem, 3rem) 1fr;
} }
.st-nav-sticky {
}
.st-nav-is-open { .st-nav-is-open {
transform: translateX(100%); transform: translateX(100%);
} }