Skip to content

Commit fa0254c

Browse files
committed
maint(pat-bumper): Correct documentation.
1 parent eb70b84 commit fa0254c

File tree

1 file changed

+14
-11
lines changed

1 file changed

+14
-11
lines changed

src/pat/bumper/documentation.md

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
## Description
22

3+
Pumber Pattern - Add bumping classes for sticky elements.
4+
35
A bumper is an element that, when the user starts scrolling, stays within view when a viewport border touches it.
46

57
## Documentation
@@ -10,9 +12,14 @@ Below is a simple example of a bumper.
1012
Bumper content
1113
</div>
1214

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.
1623

1724
### Bumpers in scrolling containers
1825

@@ -23,13 +30,10 @@ You can also put a bumper in a scrolling container. Here is an example:
2330
<p>...</p>
2431
</div>
2532

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.
3337

3438
### Class specification
3539

@@ -61,4 +65,3 @@ The available options are:
6165
| `bump-remove` | _unset_ | CSS class(es) to removed when an element is bumped. | String |
6266
| `unbump-add` | _unset_ | CSS class(es) to add when an element is no longer bumped. | String |
6367
| `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

Comments
 (0)