“Scroll To Top Then Fixed” Effect With jQuery

Of late there has been a UI trend of page elements (usually navigation items) that scroll with the rest of the page until they reach the top of the browser window. At this point those elements stop moving, while the rest of the page’s content continues to scroll up behind them. This trick – referred to variously as “scroll to top then fixed” or “fixed floating elements” can’t be achieved with CSS alone, at least at this stage; we must integrate some JavaScript (for this example, in the form of JQuery) to pull the effect off.