Skip to content

Commit 9968ca0

Browse files
philwarehamphilwareham
committed
Revert the dynamic sticky header
Didn't work as well as I'd liked.
1 parent 9356418 commit 9968ca0

File tree

13 files changed

+43
-117
lines changed

13 files changed

+43
-117
lines changed

‎src/assets/js/main.js‎

Lines changed: 0 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -103,47 +103,3 @@
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: 6 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -83,39 +83,15 @@ noscript {
8383
*/
8484

8585
.wrapper {
86-
margin: -1px 0;
87-
padding: 1px 0;
88-
background: var(--clr-bkgd);
89-
color: var(--clr-text);
90-
}
91-
92-
/**
93-
* Show/hide header on scroll.
94-
*
95-
* Example HTML:
96-
*
97-
* <div id="dynamic-header">
98-
* <header>
99-
* <nav>
100-
* </div>
101-
*/
102-
103-
#dynamic-header {
104-
border-bottom: 2px solid var(--clr-text);
86+
position: relative;
87+
padding-top: 1px;
88+
border-bottom: 1px solid var(--clr-bkgd);
10589
background: var(--clr-bkgd);
10690
color: var(--clr-text);
107-
108-
.js & {
109-
position: sticky;
110-
z-index: 100;
111-
top: 0;
112-
right: 0;
113-
width: 100%;
114-
}
11591
}
11692

11793
@include setup.dark-mode {
118-
#dynamic-header {
94+
.wrapper {
11995
border-bottom-color: var(--clr-brdr-extra-dark);
12096
}
12197
}
@@ -134,13 +110,6 @@ noscript {
134110
.wrapper-footer {
135111
flex: 1;
136112
padding-bottom: 0.5em;
137-
border-top: 1px solid var(--clr-bkgd);
138-
}
139-
140-
@include setup.dark-mode {
141-
.wrapper-footer {
142-
border-top-color: var(--clr-brdr-extra-dark);
143-
}
144113
}
145114

146115
/**
@@ -656,13 +625,13 @@ main .layout-4col-3span {
656625
border: 1px solid var(--clr-btn-border);
657626
border-radius: 0.25em; // 4px / 16px
658627
background: var(--clr-bkgd);
659-
color: var(--clr-text-button);
628+
color: var(--clr-text);
660629
font-weight: bolder;
661630

662631
&:hover {
663632
border-color: var(--clr-btn-border-interact);
664633
filter: brightness(1.05);
665-
color: var(--clr-text-button-interact);
634+
color: var(--clr-text);
666635
text-decoration: none;
667636

668637
&::before {

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

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

106106
.a--skip-link {
107107
position: absolute;
108-
z-index: 101;
108+
z-index: 2;
109109
top: 1px;
110110
left: 1px;
111111
padding: 0.25em 0.5em;

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,16 @@
33
/* Navigation
44
========================================================================== */
55

6+
.nav-container {
7+
border-bottom: 2px solid var(--clr-text);
8+
}
9+
10+
@include setup.dark-mode {
11+
.nav-container {
12+
border-bottom-color: var(--clr-brdr-extra-dark);
13+
}
14+
}
15+
616
#site-navigation {
717
font-family: var(--font-serif);
818

@@ -113,6 +123,7 @@
113123
right: 5%;
114124
width: 32px;
115125
height: 32px;
126+
margin-top: 1px;
116127
border: 1px solid var(--clr-bkgd);
117128
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");
118129
background-size: 32px 32px;

‎src/mockups/blog-article.html‎

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

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

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

133134
<!-- Header -->
134135
<header class="site-header" itemscope itemtype="https://schema.org/Organization">
@@ -146,6 +147,7 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
146147
</div>
147148
</header>
148149

150+
149151
<!-- Navigation -->
150152
<div class="nav-container">
151153
<a id="site-navigation-toggle" href="#" role="button" aria-controls="site-navigation" title="Navigation menu">Navigation menu</a>
@@ -162,9 +164,6 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
162164
</nav>
163165
</div>
164166

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

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

‎src/mockups/blog-landing.html‎

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

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

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

8384
<!-- Header -->
8485
<header class="site-header" itemscope itemtype="https://schema.org/Organization">
@@ -96,6 +97,7 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
9697
</div>
9798
</header>
9899

100+
99101
<!-- Navigation -->
100102
<div class="nav-container">
101103
<a id="site-navigation-toggle" href="#" role="button" aria-controls="site-navigation" title="Navigation menu">Navigation menu</a>
@@ -112,9 +114,6 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
112114
</nav>
113115
</div>
114116

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

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

‎src/mockups/documentation-example.html‎

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

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

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

5455
<!-- Header -->
5556
<header class="site-header" itemscope itemtype="https://schema.org/Organization">
@@ -67,6 +68,7 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
6768
</div>
6869
</header>
6970

71+
7072
<!-- Navigation -->
7173
<div class="nav-container">
7274
<a id="site-navigation-toggle" href="#" role="button" aria-controls="site-navigation" title="Navigation menu">Navigation menu</a>
@@ -83,9 +85,6 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
8385
</nav>
8486
</div>
8587

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

9089
<!-- Primary Content -->
9190
<main id="main" aria-label="Main content">

‎src/mockups/error.html‎

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

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

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

3334
<!-- Header -->
3435
<header class="site-header" itemscope itemtype="https://schema.org/Organization">
@@ -46,6 +47,7 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
4647
</div>
4748
</header>
4849

50+
4951
<!-- Navigation -->
5052
<div class="nav-container">
5153
<a id="site-navigation-toggle" href="#" role="button" aria-controls="site-navigation" title="Navigation menu">Navigation menu</a>
@@ -62,9 +64,6 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
6264
</nav>
6365
</div>
6466

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

6968
<!-- Primary Content -->
7069
<main id="main" aria-label="Main content">

‎src/mockups/get-started.html‎

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

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

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

7778
<!-- Header -->
7879
<header class="site-header" itemscope itemtype="https://schema.org/Organization">
@@ -90,6 +91,7 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
9091
</div>
9192
</header>
9293

94+
9395
<!-- Navigation -->
9496
<div class="nav-container">
9597
<a id="site-navigation-toggle" href="#" role="button" aria-controls="site-navigation" title="Navigation menu">Navigation menu</a>
@@ -106,9 +108,6 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
106108
</nav>
107109
</div>
108110

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

113112
<!-- Primary Content -->
114113
<main id="main" aria-label="Main content">

‎src/mockups/index.html‎

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

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

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

6869
<!-- Header -->
6970
<header class="site-header" itemscope itemtype="https://schema.org/Organization">
@@ -81,6 +82,7 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
8182
</div>
8283
</header>
8384

85+
8486
<!-- Navigation -->
8587
<div class="nav-container">
8688
<a id="site-navigation-toggle" href="#" role="button" aria-controls="site-navigation" title="Navigation menu">Navigation menu</a>
@@ -97,9 +99,6 @@ <h1 class="masthead" itemprop="name"><a rel="home" itemprop="url" href="https://
9799
</nav>
98100
</div>
99101

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

104103
<!-- Primary Content -->
105104
<main aria-label="Main content">

0 commit comments

Comments
 (0)