Charlton Roberts

Creative Developer, Squarespace

“Machinery has been taught arithmetic instead of poetry.”
Charles Babbage, 1832

One Page Nav, scrollOffset Workaround Without Top Padding

The Problem

For the new Pilot site, we are using the clean and quick One Page Navigation jQuery plugin from Trevor Davis. In older versions of the site, the previous dev had used scrollOffset config feature. However, I wanted to use an updated version, and Trevor warned in several issues that the feature will soon be deprecated. He said to use padding-top and a negative top margin as a workaround.

However, I quickly discovered a limitation to this method: it fails for sections with background colors or images. I came across this wonderful post by Nicolas Gallagher in which he clearly outlines several methods to produce a floating header, with pros and cons of each.

The Solution

Ultimately, the method that worked for me was as follows (Method D):

CSS // Assuming a nav/header height of 100px; section { border-top: 100px solid transparent; margin-top: -100px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; }

What's Going On Here?

We're establishing a transparent border that corresponds to the height of the header. The negative top margin positions the element for the jump link. Then–and this is the important part–we're clipping the background to the padding box. The syntax for background-clip is similar to box-sizing.

Limitations and Support

Two important limitations to note. First, this obviously prohibits you from placing an actual border at the top of the section. But, presumably you could place a border on an inner element, which you probably have anyway. Second, This causes the last X pixels of the previous section to be unclickable, where X is the height of the nav/header. This effect is due to the border, which is stacked above the previous section (negative margin). Typically this won't be a problem from a design perspective, as you'll want some space at the end of each element. But you shouldn't put any buttons or links down at the very bottom of any of sections for this reason.

Nicholas claims the following support for this particular method: Known support: Firefox 1.0+, Opera 10.5+, Safari 3+, Chrome