stickynavwithtransitons

Sticky Navigation with transitions using Foundations event trigger listeners and a custom Data-tog script used to animate multiple elements. (title-bar, title-bar-left, and title-bar-right)
Data-tog adds or removes class "shrink" to all elements with data-attribute "data-tog" = "nest1" while listening to title-bar for stuckto or unstuckfrom states.

Different css settings for each transitioned element are set by adding the class "shrink" to them first. Each element must have a unique id. By greying out the "shrink" class, set the css settings for after the transition occurs. Ungrey the class "shrink" and now adjust the css settings before the transition occurs.

If complex settings are needed for before and after one trick that works well for visually designing between before and after is to duplicate the element. Once duplicated go to the duplicated element and delete the class being toggled. (shrink in this case) Adjust the settings for both elements - origional and the duplicated. After you are done delete the duplicated element. Settings will be saved now for the toggling effect of "shrink" on the origional element. (Note: You must change a setting on the origional element being duplicated first as it seems it does not save the duplicated element changes if a change has not been made on the origional.) This obviously is very complex but gives you a visual for your changes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.