Skip to content

Commit 6483649

Browse files
thetthet
committed
feat(pat scroll-marker): Add pattern to set navigation classes based on the scroll position.
The new scroll-marker pattern allows you to set classes on the navigation and content elements for hash-links. If a content section with a hash id and a corresponding navigation link with the same hash-url is visible, the navigation and content section are marked with CSS classes.
1 parent 148f79a commit 6483649

File tree

5 files changed

+605
-0
lines changed

5 files changed

+605
-0
lines changed

‎src/pat/scroll-marker/documentation.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# pat-scroll-marker
2+
3+
## Description
4+
5+
Marks navigation items and content with CSS classes if they are scrolled to and in view.
6+
7+
8+
## Documentation
9+
10+
For hash-urls in a navigation structure with a corresponding content item, the
11+
link and the content item are marked with configurable CSS classes when the
12+
content item is in view or the current one.
13+
14+
For the pattern to work you need a navigation structure with hash-urls.
15+
Only urls starting with a `#` sign are included in pat-scroll-marker.
16+
17+
There are different calculation strategies to determine the current content
18+
item, explained in the options reference below.
19+
20+
Here is a complete example:
21+
22+
<nav class="pat-navigation"
23+
data-pat-navigation="
24+
scroll-marker-visibility: most-visible;
25+
scroll-marker-distance: 100%;
26+
scroll-marker-side: auto;
27+
">
28+
<a href="#id1">link 1</a>
29+
<a href="#id2">link 2</a>
30+
<a href="#id3">link 3</a>
31+
</nav>
32+
33+
<section id="id1">
34+
<h3>1</h3>
35+
<p>text1</p>
36+
</section>
37+
38+
<section id="id1">
39+
<h3>1</h3>
40+
<p>text1</p>
41+
</section>
42+
43+
<section id="id1">
44+
<h3>1</h3>
45+
<p>text1</p>
46+
</section>
47+
48+
49+
### Options reference
50+
51+
| Property | Default Value | Values | Type | Description |
52+
| -------------- | ------------- | ------ | ----------------- | ----------------------------- |
53+
| in-view-class | in-view | | String | CSS class for a navigation item when it's corresponding content item is in view. |
54+
| current-class | current | | String | CSS class for a navigation item when it's corresponding content item is the current one. |
55+
| current-content-class | current | | String | CSS class for a content item when it is the current one. |
56+
| side | top | top, bottom, middle, auto | String | Side of element that scrolls. This is used to calculate the current item. The defined side of the element will be used to calculate the distance baseline. If this is set to "auto" then one of the "top" or "bottom" positions are used, depending on which one is nearer to the distance baseline. |
57+
| distance | 50% | | String | Distance from side of scroll box. any amount in px, %, vw, vh, vmin or vmax. This is used to calculate the current item. The nearest element to the distance-baseline measured from the top of the container will get the current class. |
58+
| visibility | | null, most-visible | String | Visibility of element in scroll box. This is used to calculate the current item. If "most-visible" is set, the element which is most visible in the scroll container gets the current class. If more elements have the same visibility ratio, the other conditions are used to calculate the current one. |

‎src/pat/scroll-marker/index.html‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Scroll marker demo</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="/style/common.css" />
7+
<script src="/bundle.min.js"></script>
8+
</head>
9+
<style>
10+
html{
11+
scroll-behavior: smooth;
12+
}
13+
.nav-container {
14+
position: fixed;
15+
top: 1em;
16+
right: 1em;
17+
background-color: #eee;
18+
padding: 1em;
19+
border-top: 1px solid black;
20+
border-right: 1px solid black;
21+
border-left: 5px solid black;
22+
border-bottom: 5px solid black;
23+
}
24+
.in-view {
25+
border-top: 3px solid black;
26+
}
27+
.current {
28+
border-bottom: 3px solid black;
29+
}
30+
.navigation-current,
31+
.scroll-marker-current {
32+
background-color: #eee;
33+
}
34+
section {
35+
padding: 1em;
36+
}
37+
38+
</style>
39+
<body>
40+
<div class="nav-container">
41+
<code>↱ class in-view</code>
42+
<nav class="pat-navigation"
43+
data-pat-navigation="
44+
scroll-marker-visibility: most-visible;
45+
scroll-marker-distance: 100%;
46+
scroll-marker-side: auto;
47+
">
48+
<a href="#id1">link 1</a>
49+
<a href="#id2">link 2</a>
50+
<a href="#id3">link 3</a>
51+
<a href="#id4">link 4</a>
52+
</nav>
53+
<code>↳ class current</code>
54+
</div>
55+
56+
<p>Text from: <a href="https://satoristudio.net/delorean-ipsum/">DeLorean Ipsum Text Generator</a></p>
57+
58+
<section id="id1">
59+
<h3>1</h3>
60+
<pre>
61+
Good. Have a good trip Einstein, watch your head.
62+
Marty, will we ever see you again? I know what you're
63+
gonna say, son, and you're right, you're right, But
64+
Biff just happens to be my supervisor, and I'm afraid
65+
I'm not very good at confrontations. Right, and where
66+
am I gonna be? Great Scott. Let me see that
67+
photograph again of your brother. Just as I thought,
68+
this proves my theory, look at your brother.
69+
</pre>
70+
71+
<pre>
72+
Where does he come from? There, there, now, just
73+
relax. You've been asleep for almost nine hours now.
74+
Of course, from a group of Libyan Nationalists. They
75+
wanted me to build them a bomb, so I took their
76+
plutonium and in turn gave them a shiny bomb case
77+
full of used pinball machine parts. Good, there's
78+
somebody I'd like you to meet. Lorraine. Marty, you
79+
seem so nervous, is something wrong?
80+
</pre>
81+
</section>
82+
83+
<section id="id2">
84+
<h3>2</h3>
85+
<pre>
86+
Now that's a risk you'll have to take you're life
87+
depends on it. His head's gone, it's like it's been
88+
erased. Something that really cooks. Alright, alright
89+
this is an oldie, but uh, it's an oldie where I come
90+
from. Alright guys, let's do some blues riff in b,
91+
watch me for the changes, and uh, try and keep up,
92+
okay. Yeah well look, Marvin, Marvin, you gotta play.
93+
See that's where they kiss for the first time on the
94+
dance floor. And if there's no music, they can't
95+
dance, and if they can't dance, they can't kiss, and
96+
if they can't kiss, they can't fall in love and I'm
97+
history. Right, and where am I gonna be?
98+
</pre>
99+
100+
<pre>
101+
Calvin. They're late. My experiment worked. They're
102+
all exactly twenty-five minutes slow. I guarantee it.
103+
No no no this sucker's electrical, but I need a
104+
nuclear reaction to generate the one point twenty-one
105+
gigawatts of electricity that I need. he's an idiot,
106+
comes from upbringing, parents were probably idiots
107+
too. Lorraine, if you ever have a kid like that, I'll
108+
disown you.
109+
</pre>
110+
</section>
111+
112+
<section id="id3">
113+
<h3>3</h3>
114+
<pre>
115+
Oh. What, what? Who do you think, the Libyans. I
116+
don't know, but I'm gonna find out. Excuse me.
117+
</pre>
118+
119+
<pre>
120+
Keys? He's a very strange young man. What, what is it
121+
hot? What, what? Oh, if Paul calls me tell him I'm
122+
working at the boutique late tonight.
123+
</pre>
124+
</section>
125+
126+
<section id="id4">
127+
<h3>4</h3>
128+
<pre>
129+
George, buddy. remember that girl I introduced you
130+
to, Lorraine. What are you writing? You're George
131+
McFly. this has gotta be a dream. Why is she gonna
132+
get angry with you? Who, who?
133+
</pre>
134+
135+
<pre>
136+
That Biff, what a character. Always trying to get
137+
away with something. Been on top of Biff ever since
138+
high school. Although, if it wasn't for him- Yes,
139+
definitely, god-dammit George, swear. Okay, so now,
140+
you come up, you punch me in the stomach, I'm out for
141+
the count, right? And you and Lorraine live happily
142+
ever after. I have to tell you about the future. That
143+
Biff, what a character. Always trying to get away
144+
with something. Been on top of Biff ever since high
145+
school. Although, if it wasn't for him- What a
146+
nightmare.
147+
</pre>
148+
149+
</section>
150+
</body>
151+
</html>

0 commit comments

Comments
 (0)