It seems like it has been forever since I have written anything for iheartpagelines.com but that is simple due to my hefty work load. Well lets get into today's tip.
I am sure every designer has wanted to keep some particular content in view as the user scroll down the page whether it is to keep a call to action or sales option visible. In previous Pagelines products mainly DMS there was a sticky section that allowed this to be done. with Platform 5 there is no way to do this. When I was first asked how this could be done I immediately went into building a custom section but later realize this was to much when all was needed was a plugin that a class could be added to it.
After some searching I stumbled upon this Sticky Menu Plugin and it worked really well. The options are easy to under stand and it is not over complicated.
- Any element can stick: although common use is for navigation menus, the plugin will let you pick any unique element with a name, class or ID to stick at the top of the page once you scroll past it. Use it for a sidebar, Call-to-action box, banner ad, etc.
- Positioning from top: optionally, you can add any amount of space between the sticky element and the top of the page, so that the element is not always stuck at the “ceiling” of the page.
- Enable for certain screen sizes only: optionally, you can set a minimum and/or maximum screen size where the stickiness should work. This can be handy if you have a responsive site and you don’t want your element to be sticky on smaller screens, for example.
- Push-up element: optionally, you can pick any other element lower on the page that will push the sticky element up again (for example a sidebar widget).
- Admin Bar aware: checks if the current user has an Admin Toolbar at the top of the page. If it has, the sticky element will not obscure it (or be obscured by it).
- Z-index: in case there are other elements on the page that obscure or peek through your sticky element, you can add a Z-index easily.
- Legacy Mode: in 2.0, a new method of making things sticky was introduced. In Legacy Mode, the old method will be used. See FAQ for details.
- Dynamic Mode: some issues that frequently appear in responsive themes have been address by adding a Dynamic Mode (Legacy Mode only). See FAQ for details.
- Debug Mode: find out possible reasons why your element doesn’t stick by switching on Debug Mode, and error messages will appear in your browser’s console.
How To Use It
To use this plugin effectively you will need the class or id of the element you want to sticky. Luckily for platform users this is an easy find simple look in the advanced portion of the section and the id is given to you. Next all you would do is copy and paste that id with the (#) included.
You can find the options by going to settings => Sticky menu .
Paste the id in the first box:
You may need to go the advanced options and increase the z-index if things are not to your liking.
If you would like to have the sidebar within the loop to be sticky you will need to use this id #list_primary .
Also note that only one element can sticky per page.
Hope you enjoyed this tutorial/tip if you have any questions please leave them in the comments.