Sometimes you want to see how an element behaves across breakpoints in a responsive design, but as you resize the browser window the element moves out of the viewport. Very frustrating!
This bookmarklet lets you mark an element as being "sticky" so that is it always centered in the viewport as you resize the browser window.
- Create a new bookmark in your bookmarks toolbar
- Name: Sticky Viewport
- URL: Use the code in
bookmarklet.js
- Navigate to the page you want to use it on
- Click on the Sticky Viewport button in your toolbar
- Move your mouse over the element that want to make sticky
- Click on the highlighted element to make it sticky
- Try
Alt+Clickif the element captures the click and prevents it from doing the sticky business
- Try
- Resize the browser window so the layout changes and watch the sticky element stay in the center of the viewport
MIT