Skip to content

Commit cc88c6b

Browse files
philwarehamphilwareham
committed
Sticky header on back-scroll
Fixes #326
1 parent 0b6d689 commit cc88c6b

File tree

13 files changed

+126
-43
lines changed

13 files changed

+126
-43
lines changed

‎src/assets/js/main.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,3 +103,47 @@
103103
isDark.addListener(toggleDarkMode);
104104

105105
})();
106+
107+
// Hide/show header on scroll
108+
109+
(function(document, window) {
110+
'use strict';
111+
112+
var element = document.getElementById('dynamic-header');
113+
114+
if (!element) {
115+
return true;
116+
}
117+
118+
var elHeight = 0,
119+
elTop = 0,
120+
dHeight = 0,
121+
wHeight = 0,
122+
wScrollCurrent = 0,
123+
wScrollBefore = 0,
124+
wScrollDiff = 0;
125+
126+
window.addEventListener('scroll', function() {
127+
elHeight = element.offsetHeight;
128+
dHeight = document.body.offsetHeight;
129+
wHeight = window.innerHeight;
130+
wScrollCurrent = window.pageYOffset;
131+
wScrollDiff = wScrollBefore - wScrollCurrent;
132+
elTop = parseInt(window.getComputedStyle(element).getPropertyValue('top')) + wScrollDiff;
133+
134+
if( wScrollCurrent <= 0 ) {
135+
element.style.top = '0px';
136+
} else if (wScrollDiff > 0) {
137+
element.style.top = (elTop > 0 ? 0 : elTop) + 'px';
138+
} else if (wScrollDiff < 0) {
139+
if (wScrollCurrent + wHeight >= dHeight - elHeight) {
140+
element.style.top = ((elTop = wScrollCurrent + wHeight - dHeight ) < 0 ? elTop : 0) + 'px';
141+
} else {
142+
element.style.top = (Math.abs(elTop) > elHeight ? - elHeight : elTop) + 'px';
143+
}
144+
}
145+
146+
wScrollBefore = wScrollCurrent;
147+
});
148+
149+
}(document, window, 0));

‎src/assets/sass/modules/_layout.scss

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ body {
1212
margin: 0; /* 1 */
1313
background-color: $color-text;
1414
color: $color-text-white-out;
15-
scroll-behavior: smooth; // https://caniuse.com/#search=scroll-behavior
15+
scroll-behavior: smooth;
16+
scroll-padding-top: 1rem;
1617
}
1718

1819
@include dark-mode {
@@ -85,9 +86,8 @@ noscript {
8586
*/
8687

8788
.wrapper {
88-
position: relative;
89-
padding-top: 1px;
90-
border-bottom: 1px solid $color-background;
89+
margin: -1px 0;
90+
padding: 1px 0;
9191
background: $color-background;
9292
color: $color-text;
9393
}
@@ -100,6 +100,39 @@ noscript {
100100
}
101101
}
102102

103+
/**
104+
* Show/hide header on scroll.
105+
*
106+
* Example HTML:
107+
*
108+
* <div id="dynamic-header">
109+
* <header>
110+
* <nav>
111+
* </div>
112+
*/
113+
114+
#dynamic-header {
115+
border-bottom: 2px solid $color-text;
116+
background: $color-background;
117+
color: $color-text;
118+
119+
.js & {
120+
position: sticky;
121+
z-index: 100;
122+
top: 0;
123+
right: 0;
124+
width: 100%;
125+
}
126+
}
127+
128+
@include dark-mode {
129+
#dynamic-header {
130+
border-bottom-color: $dark-color-border-extra-dark;
131+
background: $dark-color-background;
132+
color: $dark-color-text;
133+
}
134+
}
135+
103136
/**
104137
* Outer wrapper for footer.
105138
*
@@ -114,6 +147,13 @@ noscript {
114147
.wrapper-footer {
115148
flex: 1;
116149
padding-bottom: 0.5em;
150+
border-top: 1px solid $color-background;
151+
}
152+
153+
@include dark-mode {
154+
.wrapper-footer {
155+
border-top-color: $dark-color-border-extra-dark;
156+
}
117157
}
118158

119159
/**
@@ -145,7 +185,7 @@ noscript {
145185
}
146186

147187
.masthead {
148-
margin: 1em 0;
188+
margin: 0.75em 0;
149189
font-size: 1rem;
150190

151191
a {

‎src/assets/sass/modules/_links.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ h6 {
155155

156156
.a--skip-link {
157157
position: absolute;
158-
z-index: 2;
158+
z-index: 101;
159159
top: 1px;
160160
left: 1px;
161161
padding: 0.25em 0.5em;

‎src/assets/sass/modules/_navigation.scss

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,6 @@
11
/* Navigation
22
========================================================================== */
33

4-
.nav-container {
5-
border-bottom: 2px solid $color-text;
6-
}
7-
8-
@include dark-mode {
9-
.nav-container {
10-
border-bottom-color: $dark-color-border-extra-dark;
11-
}
12-
}
13-
144
#site-navigation {
155
font-family: $font-serif;
166

@@ -148,11 +138,10 @@
148138
display: none;
149139
position: absolute;
150140
z-index: 2;
151-
top: 1em;
141+
top: 0.75rem;
152142
right: 5%;
153143
width: 32px;
154144
height: 32px;
155-
margin-top: 1px;
156145
border: 1px solid $color-background;
157146
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23333' d='M4 6h24v4H4zm0 8h24v4H4zm0 8h24v4H4z'/%3E%3C/svg%3E");
158147
background-size: 32px 32px;

‎src/mockups/blog-article.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,7 @@
128128

129129
<a class="a--skip-link" href="#main">Go to main content</a>
130130

131-
<div class="wrapper">
132-
131+
<div id="dynamic-header">
133132

134133
<!-- Header -->
135134
<header class="site-header" itemscope itemtype="https://schema.org/Organization">
@@ -147,7 +146,6 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
147146
</div>
148147
</header>
149148

150-
151149
<!-- Navigation -->
152150
<div class="nav-container">
153151
<a id="site-navigation-toggle" href="#" role="button" aria-controls="site-navigation" title="Navigation menu">Navigation menu</a>
@@ -164,6 +162,9 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
164162
</nav>
165163
</div>
166164

165+
</div><!-- /#dynamic-header -->
166+
167+
<div class="wrapper">
167168

168169
<!-- Primary Content -->
169170
<main id="main" aria-label="Main content" itemscope itemtype="https://schema.org/Blog">

‎src/mockups/blog-landing.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,7 @@
7878

7979
<a class="a--skip-link" href="#main">Go to main content</a>
8080

81-
<div class="wrapper">
82-
81+
<div id="dynamic-header">
8382

8483
<!-- Header -->
8584
<header class="site-header" itemscope itemtype="https://schema.org/Organization">
@@ -97,7 +96,6 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
9796
</div>
9897
</header>
9998

100-
10199
<!-- Navigation -->
102100
<div class="nav-container">
103101
<a id="site-navigation-toggle" href="#" role="button" aria-controls="site-navigation" title="Navigation menu">Navigation menu</a>
@@ -114,6 +112,9 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
114112
</nav>
115113
</div>
116114

115+
</div><!-- /#dynamic-header -->
116+
117+
<div class="wrapper">
117118

118119
<!-- Primary Content -->
119120
<main id="main" aria-label="Main content" itemscope itemtype="https://schema.org/Blog">

‎src/mockups/documentation-example.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,7 @@
4949

5050
<a class="a--skip-link" href="#main">Go to main content</a>
5151

52-
<div class="wrapper">
53-
52+
<div id="dynamic-header">
5453

5554
<!-- Header -->
5655
<header class="site-header" itemscope itemtype="https://schema.org/Organization">
@@ -68,7 +67,6 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
6867
</div>
6968
</header>
7069

71-
7270
<!-- Navigation -->
7371
<div class="nav-container">
7472
<a id="site-navigation-toggle" href="#" role="button" aria-controls="site-navigation" title="Navigation menu">Navigation menu</a>
@@ -85,6 +83,9 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
8583
</nav>
8684
</div>
8785

86+
</div><!-- /#dynamic-header -->
87+
88+
<div class="wrapper">
8889

8990
<!-- Primary Content -->
9091
<main id="main" aria-label="Main content">

‎src/mockups/error.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@
2828

2929
<a class="a--skip-link" href="#main">Go to main content</a>
3030

31-
<div class="wrapper">
32-
31+
<div id="dynamic-header">
3332

3433
<!-- Header -->
3534
<header class="site-header" itemscope itemtype="https://schema.org/Organization">
@@ -47,7 +46,6 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
4746
</div>
4847
</header>
4948

50-
5149
<!-- Navigation -->
5250
<div class="nav-container">
5351
<a id="site-navigation-toggle" href="#" role="button" aria-controls="site-navigation" title="Navigation menu">Navigation menu</a>
@@ -64,6 +62,9 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
6462
</nav>
6563
</div>
6664

65+
</div><!-- /#dynamic-header -->
66+
67+
<div class="wrapper">
6768

6869
<!-- Primary Content -->
6970
<main id="main" aria-label="Main content">

‎src/mockups/get-started.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,7 @@
7272

7373
<a class="a--skip-link" href="#main">Go to main content</a>
7474

75-
<div class="wrapper">
76-
75+
<div id="dynamic-header">
7776

7877
<!-- Header -->
7978
<header class="site-header" itemscope itemtype="https://schema.org/Organization">
@@ -91,7 +90,6 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
9190
</div>
9291
</header>
9392

94-
9593
<!-- Navigation -->
9694
<div class="nav-container">
9795
<a id="site-navigation-toggle" href="#" role="button" aria-controls="site-navigation" title="Navigation menu">Navigation menu</a>
@@ -108,6 +106,9 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
108106
</nav>
109107
</div>
110108

109+
</div><!-- /#dynamic-header -->
110+
111+
<div class="wrapper">
111112

112113
<!-- Primary Content -->
113114
<main id="main" aria-label="Main content">

‎src/mockups/index.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,7 @@
6363

6464
<a class="a--skip-link" href="#main">Go to main content</a>
6565

66-
<div class="wrapper">
67-
66+
<div id="dynamic-header">
6867

6968
<!-- Header -->
7069
<header class="site-header" itemscope itemtype="https://schema.org/Organization">
@@ -82,7 +81,6 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
8281
</div>
8382
</header>
8483

85-
8684
<!-- Navigation -->
8785
<div class="nav-container">
8886
<a id="site-navigation-toggle" href="#" role="button" aria-controls="site-navigation" title="Navigation menu">Navigation menu</a>
@@ -99,6 +97,9 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
9997
</nav>
10098
</div>
10199

100+
</div><!-- /#dynamic-header -->
101+
102+
<div class="wrapper">
102103

103104
<!-- Primary Content -->
104105
<main aria-label="Main content">

0 commit comments

Comments
 (0)