1
1
## Description
2
2
3
+ Pumber Pattern - Add bumping classes for sticky elements.
4
+
3
5
A bumper is an element that, when the user starts scrolling, stays within view when a viewport border touches it.
4
6
5
7
## Documentation
@@ -10,9 +12,14 @@ Below is a simple example of a bumper.
10
12
Bumper content
11
13
</div>
12
14
13
- When the user starts scrolling the page and the top edge of the above div reaches the top
14
- edge of the viewport, a ` bumped ` class will be added. For this to work the pattern
15
- will automatically set the ` position ` of the div to ` relative ` .
15
+ When the user starts scrolling the page and the top edge of the above div
16
+ reaches the top edge of the viewport, a ` bumped ` class and - depending on the
17
+ bumping edges - ` bumped-top ` , ` bumped-right ` , ` bumped-botton ` or ` bumped-left `
18
+ classes will be added.
19
+
20
+ It's up to you to style the element with the help of these classes. You might
21
+ also want to set the element to ` position: sticky ` , so that it keeps it's
22
+ position relative to the viewport while scrolling.
16
23
17
24
### Bumpers in scrolling containers
18
25
@@ -23,13 +30,10 @@ You can also put a bumper in a scrolling container. Here is an example:
23
30
<p>...</p>
24
31
</div>
25
32
26
- If the container has its overflow style set to ` auto ` or ` scroll ` and its
27
- contents do not fit in the available space the browser will automatically
28
- add scrollbars. The bumper pattern will detect this and _ stick_ the bumped
29
- element so it is always visible in its container.
30
-
31
- To implement this the bumper pattern will set the ` position ` of both the
32
- bumper and its scrolling container to ` relative ` .
33
+ If the container has its ` overflow ` style set to ` auto ` or ` scroll ` and its
34
+ contents do not fit in the available space the browser will automatically add
35
+ scrollbars. When the ` pat-bumper ` element touches any edge of the scrolling
36
+ container the bumper classes will be added.
33
37
34
38
### Class specification
35
39
@@ -61,4 +65,3 @@ The available options are:
61
65
| ` bump-remove ` | _ unset_ | CSS class(es) to removed when an element is bumped. | String |
62
66
| ` unbump-add ` | _ unset_ | CSS class(es) to add when an element is no longer bumped. | String |
63
67
| ` unbump-remove ` | ` bumped ` | CSS class(es) to removed when an element is no longer bumped. | String |
64
- | ` side ` | ` top ` | The side which should bump. A combination of ` all top right bottom left ` . ` all ` is equivalent to ` top right bottom left ` . | String |
0 commit comments