While I was redoing my site, I wanted to implement some sticky elements and since I’ve used Forrst’s sap() plugin before, I decided to quickly implement it.
Soon after I realized there were a few things I needed to add get it working how I needed it:
- When the element was repositioned back into the flow of the content, it needed its original position attribute (instead of hard coding in
- Since this site is responsive, I needed the element’s (and the shim’s) width to be set to 100% instead of an absolute pixel width, so the site wouldn’t break on resizing.
- I wanted to add a small drop shadow to the element only when it was ‘sticky’
With these requirements, I headed over to github, forked my own version of sap, and implemented to changes required to get these three things working. In my version, I’m caching the element’s position absolute for use when re-flowing it, and also if a
width was passed as an option, it uses that to set the shim and element instead of the calculated pixel width.