Mission Accomplished
In this project we looked at a very simple way of mimicking CSS's position:fixed
styling to fix an important element into place. The technique to only apply the fixed positioning when the page starts to scroll is simple but effective, and is an excellent way to circumvent the shortcomings of actual position:fixed
when working with complex or liquid layouts.
We saw how to handle window resizes and added a smooth scrolling facility that scrolled the page between different named sections of the page.
We also looked at how we can read and write to the document.location.hash
property of the window
object, and how to manually scroll to the requested section when the page is loaded. We also fixed the browser's back button to work with our smooth-scrolling animations.