Keep important items visible at all times
Some sites use pinning to keep a header, sidebar, or footer always in view, having the other content on the site scroll behind it.
It's likely that you've seen pinned objects when viewing websites; they are the "persistent" items that always display in one location. They appear to float above the rest of the page content. When you pin an item, you are essentially removing an object from the flow of the page. Rather than laying it out in relation to the other page elements, you set it to a specific location in relation to the browser window.
Pinned objects appear to be "sticky" — always staying in one spot (such as the top right corner or hovering near the bottom) regardless of other scrolling page elements. If the visitor resizes their browser, pinned images always stay at their pinned location in relation to the browser window. You can think of pinning as a way to break the object out of a page's design and affix it to the browser instead, like pinning a note to a corkboard.
Some sites use pinning to keep a header, sidebar, or footer always in view, having the other content on the site scroll behind it.
Pinning can also be used to create artistic effects where objects move relative to one another when the browser window is resized or the content is scrolled.
A closer look |
Sometimes you may want to have elements that always show on your page, independently from the actual vertical size of your page. That's where the pinning tool comes in handy.