11## Description  
22
3+ Pumber Pattern - Add bumping classes for sticky elements.
4+ 
35A 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