Pinned elements will remain in place when the page is scrolled until they reach the bottom boundary of their parent element.
To create a pin, just add the class pin to any element. The pinned element will respect
any top or bottom margins already applied to it.
Note Only one pinned element can exist per container element. If you have multiple items in the same area that you want pinned, wrap them in a container and pin the container.
Warning Pinned elements are not disabled for mobile screen sizes
where each column in the grid expands to 100% width. Consider either making the pinned element
permanantly fixed or using the hideMobile class for mobile screens.
Pinned elements have three custom events and three different style hooks that will allow you to either perform a dynamic action on your page when the pinned element is in a specific state or custom style your pinned element based on its state.
The and the custom events can be accessed by attaching an event listener to the pinned element.
| JavaScript Events | |
|---|---|
| Event | Description |
pinTop |
Fired whenever the page is scrolled and the pin is in its topmost position in its container. Also fired on initial page load. |
pinScroll |
Fired whenever the page is scrolled and the pin is between the top and bottom boundaries of its container. |
pinBottom |
Fired when the page is scrolled and the pin has reached the bottom boundary of its container. |
Style hooks are simply CSS classes added to the pinned element. An demo of style hooks in action can be found in the floating navbar on the Ecommerce example page.
| Style Hooks | |
|---|---|
| CSS Class | Description |
pinTop |
Present whenever the page is scrolled and the pin is in its topmost position in its container. Also present on initial page load. |
pinScroll |
Present whenever the page is scrolled and the pin is between the top and bottom boundaries of its container. |
pinBottom |
Present when the page is scrolled and the pin has reached the bottom boundary of its container. |
Below is the code for the pinned list to the left. The pinContainer and
showCol classes aren't necessary to create a pin, they're just used to create the
demo.
<div class="col3 pinContainer showCol"> <div class="pin"> <h6>Pinned Example</h6> <ul> <li><a href="#description">Description</a></li> <li><a href="#code">Code Example</a></li> </ul> </div> </div>
VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.