markup.tips
/web/tips/

Page Description Published On
 Silence Your CSS Footprint With Sass Silent… Efficiently group your common styles together to reduce your CSS footprint in this Thinkful project..
 Sticking Components above the Fold Get stuck riding the bleeding edge with this unstable CSS3 feature
 Creating an Accessible to-do list powered by… Enhance a simple to–do list with React.js
 Adopting Orphans with   Up your typography game with the use of this single HTML entity
 Making your Markup Speak Using speakable.jquery.js you too can make your markup talk
 Loading Modernizr from a CDN Get the best of both worlds by loading Modernizr from a CDN near you
 Creating an Accessible Settings Table Create an accessible settings table using HTML5, CSS3, and a sprinkle of jQuery


Sticking Components Above “the Fold”#CSS

The task of somehow replicating the functionality of a standard tree component in a mobile first and responsive way troubled me until I just couldn't stand it; there has to be a simple solution here. After spending some time searching through my HTML5/CSS3 toolbox and bashing my head against the keyboard I just turned the computer off and gave up…

Later doing some sketches on paper I realized position:sticky could be the awesome-sauce I'd been looking for. Let's have a look at the Dashboard page all squashed up in an iframe as an example below. (psssst…you can probably just scroll down on this page for stickiness :p)

Dashboard Concept in an high contrast mode. Scroll up and then back down within the iframe to see effect.

Notice that our search bar is always present but when we scroll to the top of the page it "un-sticks" itself making way for the contextual navigation above. How cool sticky is that? I had been looking for a way to allow a tree–link navigational component to always be within reach. One of the challenges of mobile first design, is you are generally confined to a one–column layout. That's ok though, because with a little creative use of position:sticky and anchor links we can do just that. The concept is simple, we put what we want to be at the top of the page further below. Anything above this threshold is considered contextual and scrolled beyond. This design pattern of simulating a negative y-axis originated from mobile design when we saw features like the ability to scroll up to a hidden component such as a search bar. Designing mobile–first we limit ourselves to one big column, but we don't always have to start our users off at document.body.ScrollTop = 0;

We can stash useful stuff out of the way by scrolling right passed it; or most of it that is. We always want our #main-nav to be accessible so we'll make it stick to to the top. Appending #focus to our links will tell the browser to scroll straight to the main content area. So how does the search bar always stay viewable by sticking to the top when it is scrolled beyond? 

#main-nav {
  position: -webkit-sticky;
  -webkit-position: sticky;
  -moz-position: sticky;
  position: sticky;
  top:0;
}

Conclusion

Pretty slick sticky eh? What do you think, could you see yourself using this on a project? Let us know.

Disqus This