{ "type": [ "h-entry" ], "properties": { "name": [ "Sticky headers" ], "published": [ "2016-06-28T13:43:01Z" ], "category": [ "css", "header", "nav" ], "bookmark-of": [ { "type": [ "h-cite" ], "properties": { "url": [ "https://adactio.com/journal/10877" ], "name": [ "Sticky headers" ], "location": [ { "type": [ "h-card", "p-location" ], "properties": { "latitude": [ "+50.832522" ], "longitude": [ "-000.118055" ] } } ], "comment": [ { "type": [ "h-cite" ], "properties": { "name": [ "Aaron Parecki" ], "published": [ "2016-06-26T19:06:22" ], "url": [ "https://aaronparecki.com/2016/06/26/6/" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Aaron Parecki" ], "url": [ "https://aaronparecki.com/2016/06/26/6/" ] } } ], "content": [ { "value": "
“The other “gotcha!” with having a sticky header is making sure that in-page anchors still work. Nicolas Gallagher covers the options for this in a post called Jump links and viewport positioning. Here’s the CSS I ended up using:\n:target:before { content: ”; display: block; height: 3em; margin: -3em 0 0;\n}”
", "html": "“The other “gotcha!” with having a sticky header is making sure that in-page anchors still work. Nicolas Gallagher covers the options for this in a post called Jump links and viewport positioning. Here’s the CSS I ended up using:\n:target:before { content: ”; display: block; height: 3em; margin: -3em 0 0;\n}”
Bookmarking these helpful considerations for sticky headers from @adactio adactio.com/journal/10877
", "html": "Bookmarking these helpful considerations for sticky headers from @adactio adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Georg Portenkirchner" ], "published": [ "2016-06-26T22:39:30" ], "url": [ "https://twitter.com/portenkirchner/status/747182525366341632" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Georg Portenkirchner" ], "url": [ "https://twitter.com/portenkirchner/status/747182525366341632" ] } } ], "content": [ { "value": "Sticky headers adactio.com/journal/10877 #CSS
", "html": "Sticky headers adactio.com/journal/10877 #CSS
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Jean-Pierre Vincent" ], "published": [ "2016-06-27T07:37:38" ], "url": [ "https://twitter.com/theystolemynick/status/747317952324608001" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Jean-Pierre Vincent" ], "url": [ "https://twitter.com/theystolemynick/status/747317952324608001" ] } } ], "content": [ { "value": "2-3 points techniques à prendre en compte quand on fait un header fixe adactio.com/journal/10877
", "html": "2-3 points techniques à prendre en compte quand on fait un header fixe adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Chris Micek" ], "published": [ "2016-06-27T11:53:00" ], "url": [ "https://twitter.com/cmicek/status/747382216016134144" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Chris Micek" ], "url": [ "https://twitter.com/cmicek/status/747382216016134144" ] } } ], "content": [ { "value": "“Sticky headers” via @digg adactio.com/journal/10877
", "html": "“Sticky headers” via @digg adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Stephanie Hobson" ], "published": [ "2016-06-27T22:56:56" ], "url": [ "https://twitter.com/stephaniehobson/status/747549299592945664" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Stephanie Hobson" ], "url": [ "https://twitter.com/stephaniehobson/status/747549299592945664" ] } } ], "content": [ { "value": "Vertical media queries are your friend with sticky headers!!! adactio.com/journal/10877 Please don’t fill my tiny laptop screen with header.
", "html": "Vertical media queries are your friend with sticky headers!!! adactio.com/journal/10877 Please don’t fill my tiny laptop screen with header.
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Front-End Front" ], "published": [ "2016-06-28T09:31:20" ], "url": [ "https://twitter.com/frontendfront/status/747708951144304640" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Front-End Front" ], "url": [ "https://twitter.com/frontendfront/status/747708951144304640" ] } } ], "content": [ { "value": "Sticky headers adactio.com/journal/10877
", "html": "Sticky headers adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Henrique Alves" ], "published": [ "2016-06-28T13:46:34" ], "url": [ "https://twitter.com/healves82/status/747773184573865984" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Henrique Alves" ], "url": [ "https://twitter.com/healves82/status/747773184573865984" ] } } ], "content": [ { "value": "Handy tips on sticky headers from @adactio adactio.com/journal/10877 #CSS
", "html": "Handy tips on sticky headers from @adactio adactio.com/journal/10877 #CSS
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Barry Frost" ], "published": [ "2016-06-28T14:43:01" ], "url": [ "https://barryfrost.com/2016/06/sticky-headers" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Barry Frost" ], "url": [ "https://barryfrost.com/2016/06/sticky-headers" ] } } ], "content": [ { "value": "Sticky headers
", "html": "Sticky headers
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Pinceladas da Web" ], "published": [ "2016-06-28T15:02:10" ], "url": [ "https://twitter.com/pinceladasdaweb/status/747792208674291713" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Pinceladas da Web" ], "url": [ "https://twitter.com/pinceladasdaweb/status/747792208674291713" ] } } ], "content": [ { "value": "Sticky headers: adactio.com/journal/10877
", "html": "Sticky headers: adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Jeffrey Zeldman" ], "published": [ "2016-06-28T15:43:05" ], "url": [ "https://twitter.com/zeldman/status/747802507330592768" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Jeffrey Zeldman" ], "url": [ "https://twitter.com/zeldman/status/747802507330592768" ] } } ], "content": [ { "value": "Sticky headers—the right way. @adactio adactio.com/journal/10877
", "html": "Sticky headers—the right way. @adactio adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Marco Hengstenberg" ], "published": [ "2016-06-28T15:45:43" ], "url": [ "https://twitter.com/nice2meatu/status/747803167975432192" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Marco Hengstenberg" ], "url": [ "https://twitter.com/nice2meatu/status/747803167975432192" ] } } ], "content": [ { "value": "Fixed headers done right by @adactioadactio.com/journal/10877
", "html": "Fixed headers done right by @adactioadactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Ian Stanley @HubSpot" ], "published": [ "2016-06-28T15:46:45" ], "url": [ "https://twitter.com/meanoiano/status/747803429247016960" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Ian Stanley @HubSpot" ], "url": [ "https://twitter.com/meanoiano/status/747803429247016960" ] } } ], "content": [ { "value": "KISS with Sticky Headers for better user experience adactio.com/journal/10877 via @zeldman #ux
", "html": "KISS with Sticky Headers for better user experience adactio.com/journal/10877 via @zeldman #ux
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "DeborahEdwards-Onoro" ], "published": [ "2016-06-28T16:03:11" ], "url": [ "https://twitter.com/redcrew/status/747807563345989632" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "DeborahEdwards-Onoro" ], "url": [ "https://twitter.com/redcrew/status/747807563345989632" ] } } ], "content": [ { "value": "Sticky headers, with CSS fix for making sure in-page anchors still work bit.ly/290rw9D via @adactio #CSS\n
", "html": "Sticky headers, with CSS fix for making sure in-page anchors still work bit.ly/290rw9D via @adactio #CSS\n
You know when @adactio does something he seriously thought about it. His advice on Sticky headers. adactio.com/journal/10877
", "html": "You know when @adactio does something he seriously thought about it. His advice on Sticky headers. adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Clive Walker" ], "published": [ "2016-06-28T18:22:34" ], "url": [ "https://twitter.com/clivewalker/status/747842640176095232" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Clive Walker" ], "url": [ "https://twitter.com/clivewalker/status/747842640176095232" ] } } ], "content": [ { "value": "Good post by @adactio about Sticky Headers and overcoming some gotchas adactio.com/journal/10877
", "html": "Good post by @adactio about Sticky Headers and overcoming some gotchas adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Pinboard Popular" ], "published": [ "2016-06-28T18:36:05" ], "url": [ "https://twitter.com/PinPopular/status/747846043216207872" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Pinboard Popular" ], "url": [ "https://twitter.com/PinPopular/status/747846043216207872" ] } } ], "content": [ { "value": "Adactio: Journal—Sticky headers adactio.com/journal/10877
", "html": "Adactio: Journal—Sticky headers adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "A Book Apart" ], "published": [ "2016-06-28T19:58:52" ], "url": [ "https://twitter.com/abookapart/status/747866874231291904" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "A Book Apart" ], "url": [ "https://twitter.com/abookapart/status/747866874231291904" ] } } ], "content": [ { "value": "How to make headers sticky, from @adactio:adactio.com/journal/10877
", "html": "How to make headers sticky, from @adactio:adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Joe Snell" ], "published": [ "2016-06-28T20:10:08" ], "url": [ "https://twitter.com/joesnellpdx/status/747869712223211520" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Joe Snell" ], "url": [ "https://twitter.com/joesnellpdx/status/747869712223211520" ] } } ], "content": [ { "value": "Good things to consider when crafting sticky headers: ow.ly/gtro301JiMQ by @adactio\n
", "html": "Good things to consider when crafting sticky headers: ow.ly/gtro301JiMQ by @adactio\n
Super-concise, clear, and very useful tips for “sticky” headers, from @adactio — adactio.com/journal/10877
", "html": "Super-concise, clear, and very useful tips for “sticky” headers, from @adactio — adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Stefan van Daalen" ], "published": [ "2016-06-28T22:37:52" ], "url": [ "https://twitter.com/stefanvandaalen/status/747906889657233413" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Stefan van Daalen" ], "url": [ "https://twitter.com/stefanvandaalen/status/747906889657233413" ] } } ], "content": [ { "value": "What @adactio thinks about sticky headers. adactio.com/journal/10877
", "html": "What @adactio thinks about sticky headers. adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Roberto De Santis" ], "published": [ "2016-06-29T01:30:25" ], "url": [ "https://twitter.com/bobdesa64/status/747950314691661826" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Roberto De Santis" ], "url": [ "https://twitter.com/bobdesa64/status/747950314691661826" ] } } ], "content": [ { "value": "Top story: Adactio: Journal—Sticky headers adactio.com/journal/10877, see more tweetedtimes.com/helikopterdsgn…\n
", "html": "Top story: Adactio: Journal—Sticky headers adactio.com/journal/10877, see more tweetedtimes.com/helikopterdsgn…\n
Top story:web design Adactio: Journal—Sticky headers adactio.com/journal/10877, see more tweetedtimes.com/helikopterdsgn…\n
", "html": "Top story:web design Adactio: Journal—Sticky headers adactio.com/journal/10877, see more tweetedtimes.com/helikopterdsgn…\n
Top story: #web #design Adactio: Journal—Sticky headers adactio.com/journal/10877, see more tweetedtimes.com/helikopterdsgn…\n
", "html": "Top story: #web #design Adactio: Journal—Sticky headers adactio.com/journal/10877, see more tweetedtimes.com/helikopterdsgn…\n
Boost the UX of sticky headers: adactio.com/journal/10877\nSeriously: vertical media queries should be required if you even consider them.
", "html": "Boost the UX of sticky headers: adactio.com/journal/10877\nSeriously: vertical media queries should be required if you even consider them.
If using a sticky nav:\nUse a min-height MQ\nAllow keyboard-initiated scrolling\nAdjust the position of in-page links.adactio.com/journal/10877
", "html": "If using a sticky nav:\nUse a min-height MQ\nAllow keyboard-initiated scrolling\nAdjust the position of in-page links.adactio.com/journal/10877
Tips for Sticky headers - vertical media queries, jump links, viewport positioning and keyboard page scrolling. adactio.com/journal/10877
", "html": "Tips for Sticky headers - vertical media queries, jump links, viewport positioning and keyboard page scrolling. adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Aarón García" ], "published": [ "2016-06-29T22:36:03" ], "url": [ "https://twitter.com/aarongarciah/status/748268819056066560" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Aarón García" ], "url": [ "https://twitter.com/aarongarciah/status/748268819056066560" ] } } ], "content": [ { "value": "Great recap of things to remember when you’re doing a sticky header bit.ly/293slAk by @adactio\n
", "html": "Great recap of things to remember when you’re doing a sticky header bit.ly/293slAk by @adactio\n
Faire un header fixe, ce n’est pas si simple que ça ! Explications : adactio.com/journal/10877 #CSS
", "html": "Faire un header fixe, ce n’est pas si simple que ça ! Explications : adactio.com/journal/10877 #CSS
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Sebastien Hiticas" ], "published": [ "2016-07-01T18:08:41" ], "url": [ "https://twitter.com/sebhiticas/status/748926310148370432" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Sebastien Hiticas" ], "url": [ "https://twitter.com/sebhiticas/status/748926310148370432" ] } } ], "content": [ { "value": "Sticky headers, the right way #webdeveloper #html #css #developer adactio.com/journal/10877
", "html": "Sticky headers, the right way #webdeveloper #html #css #developer adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "안형우" ], "published": [ "2016-07-03T06:09:00" ], "url": [ "https://twitter.com/mytory/status/749469973169393665" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "안형우" ], "url": [ "https://twitter.com/mytory/status/749469973169393665" ] } } ], "content": [ { "value": "Adactio: Journal—Sticky headers adactio.com/journal/10877
", "html": "Adactio: Journal—Sticky headers adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Ally Baird" ], "published": [ "2016-07-04T08:53:22" ], "url": [ "https://twitter.com/Ally__Baird/status/749873722392190976" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Ally Baird" ], "url": [ "https://twitter.com/Ally__Baird/status/749873722392190976" ] } } ], "content": [ { "value": "Jeremy Keith (@adactio) explains how to do ‘sticky’ headers the right way bit.ly/29kj2NV #webdev #rwd #css\n
", "html": "Jeremy Keith (@adactio) explains how to do ‘sticky’ headers the right way bit.ly/29kj2NV #webdev #rwd #css\n
Ya’ll better fix your sticky headers — adactio.com/journal/10877 by @adactio
", "html": "Ya’ll better fix your sticky headers — adactio.com/journal/10877 by @adactio
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "James McKenzie" ], "published": [ "2016-07-05T16:18:08" ], "url": [ "https://twitter.com/jmkenz/status/750348042499420162" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "James McKenzie" ], "url": [ "https://twitter.com/jmkenz/status/750348042499420162" ] } } ], "content": [ { "value": "Sticky Header Gotchyas - adactio.com/journal/10877
", "html": "Sticky Header Gotchyas - adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Rui Ribeiro" ], "published": [ "2016-07-08T17:58:37" ], "url": [ "https://twitter.com/ruirrib/status/751460491034230784" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Rui Ribeiro" ], "url": [ "https://twitter.com/ruirrib/status/751460491034230784" ] } } ], "content": [ { "value": "Sticky headers adactio.com/journal/10877 #webdev #css
", "html": "Sticky headers adactio.com/journal/10877 #webdev #css
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Matt Vance" ], "published": [ "2016-07-22T01:55:14" ], "url": [ "https://twitter.com/minezone/status/756291480654901248" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Matt Vance" ], "url": [ "https://twitter.com/minezone/status/756291480654901248" ] } } ], "content": [ { "value": "Does your site use sticky headers? Watch out for the subtle UI/UX gotchas, as detailed here: j.mp/29XhlZw via @adactioJournal\n
", "html": "Does your site use sticky headers? Watch out for the subtle UI/UX gotchas, as detailed here: j.mp/29XhlZw via @adactioJournal\n
Dealing with those damn sticky headers :: adactio.com/journal/10877
", "html": "Dealing with those damn sticky headers :: adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "Clive Walker" ], "published": [ "2016-12-05T14:28:18" ], "url": [ "https://twitter.com/clivewalker/status/805780845629947904" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Clive Walker" ], "url": [ "https://twitter.com/clivewalker/status/805780845629947904" ] } } ], "content": [ { "value": "Sticky headers adactio.com/journal/10877
", "html": "Sticky headers adactio.com/journal/10877
" } ] } }, { "type": [ "h-cite" ], "properties": { "name": [ "6 Likes" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Gunnar Bittersmann" ], "url": [ "https://twitter.com/adactioJournal/status/747128676362354689#favorited-by-420958148" ] } } ], "published": [ "2016-06-26T19:35:38" ] } } ], "published": [ "2016-06-26T19:03:59" ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "Jeremy Keith" ], "photo": [ "https://adactio.com/images/photo-150.jpg" ], "url": [ "https://adactio.com/" ] } } ], "content": [ { "value": "I made a little tweak to The Session today. The navigation bar across the top is “sticky” now—it doesn’t scroll with the rest of the content.
\nI made sure that the stickiness only kicks in if the screen is both wide and tall enough to warrant it. Vertical media queries are your friend!
\nBut it’s not enough to just put some position: fixed
CSS inside a media query. There are some knock-on effects that I needed to mitigate.
I use the space bar to paginate through long pages. It drives me nuts when sites with sticky headers don’t accommodate this. I made use of Tim Murtaugh’s sticky pagination fixer. It makes sure that page-jumping with the keyboard (using the space bar or page down) still works. I remember when I linked to this script two years ago, thinking “I bet this will come in handy one day.” Past me was right!
\nThe other “gotcha!” with having a sticky header is making sure that in-page anchors still work. Nicolas Gallagher covers the options for this in a post called Jump links and viewport positioning. Here’s the CSS I ended up using:
\n:target:before {\n content: '';\n display: block;\n height: 3em;\n margin: -3em 0 0;\n}\n
\nI also needed to check any of my existing JavaScript to see if I was using scrollTo
anywhere, and adjust the calculations to account for the newly-sticky header.
Anyway, just a few things to consider if you’re going to make a navigational element “sticky”:
\nmin-height
in your media query,I made a little tweak to The Session today. The navigation bar across the top is “sticky” now—it doesn’t scroll with the rest of the content.
\nI made sure that the stickiness only kicks in if the screen is both wide and tall enough to warrant it. Vertical media queries are your friend!
\nBut it’s not enough to just put some position: fixed
CSS inside a media query. There are some knock-on effects that I needed to mitigate.
I use the space bar to paginate through long pages. It drives me nuts when sites with sticky headers don’t accommodate this. I made use of Tim Murtaugh’s sticky pagination fixer. It makes sure that page-jumping with the keyboard (using the space bar or page down) still works. I remember when I linked to this script two years ago, thinking “I bet this will come in handy one day.” Past me was right!
\nThe other “gotcha!” with having a sticky header is making sure that in-page anchors still work. Nicolas Gallagher covers the options for this in a post called Jump links and viewport positioning. Here’s the CSS I ended up using:
\n:target:before {\n content: '';\n display: block;\n height: 3em;\n margin: -3em 0 0;\n}\n
\nI also needed to check any of my existing JavaScript to see if I was using scrollTo
anywhere, and adjust the calculations to account for the newly-sticky header.
Anyway, just a few things to consider if you’re going to make a navigational element “sticky”:
\nmin-height
in your media query,