{"id":17417,"date":"2013-06-17T23:01:41","date_gmt":"2013-06-17T15:01:41","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17417"},"modified":"2025-04-04T01:34:07","modified_gmt":"2025-04-03T17:34:07","slug":"smart-header-footers-jquery","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/","title":{"rendered":"How to Create Auto-Hiding Headers and Footers with jQuery"},"content":{"rendered":"

Using a sticky<\/a> header navigation<\/a> on your website offers several benefits, including easy navigation to key links and a quick return to the homepage<\/strong> from any part of your site. Yet, a navigation bar that obstructs content can cause issues.<\/p>\n

In this guide, we\u2019ll show you how to create a header bar that locks in place but auto-hides as you scroll down. Additionally, when you reach the bottom of the page, a compact footer will appear, containing many of the same navigation links.<\/p>\n

This method can significantly enhance the readability and overall user experience<\/strong> of nearly any website.<\/p>\n

<\/i> See demo <\/span><\/a><\/p>\n

Creating the Structure<\/h2>\n

To begin, we\u2019ll set up a simple HTML5 framework with a fixed header and a basic content area. This example incorporates several third-party scripts from Google\u2019s CDN, including some web fonts<\/a>, as well as jQuery and jQuery UI libraries.<\/p>\n

<!doctype html>\r\n<html lang=\"en-US\">\r\n  <head>\r\n    <meta http-equiv=\"Content-Type\" content=\"text\/html;charset=utf-8\">\r\n    <title>Auto-Hiding Header Demo Page<\/title>\r\n    <meta name=\"author\" content=\"Jake Rocheleau\">\r\n    <link rel=\"shortcut icon\" href=\"https:\/\/www.hongkiat.com\/favicon.ico\">\r\n    <link rel=\"icon\" href=\"https:\/\/www.hongkiat.com\/favicon.ico\">\r\n    <link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"styles.css\">\r\n    <link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"http:\/\/fonts.googleapis.com\/css?family=Courgette|Leckerli+One\">\r\n    <script type=\"text\/javascript\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"><\/script>\r\n    <script type=\"text\/javascript\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.10.1\/jquery-ui.js\"><\/script>\r\n    <script type=\"text\/javascript\" language=\"javascript\" charset=\"utf-8\" src=\"autohide.js\"><\/script>\r\n  <\/head>\r\n\r\n  <body>\r\n    <!-- Body content here -->\r\n  <\/body>\r\n<\/html>\r\n\r\n
A crucial third local JavaScript file, named autohide.js, is also needed. This script enables us to animate the header, making it hide or show<\/strong> based on user interaction.<\/p>\r\n
Next, we'll examine the content's structure to see how the div blocks are arranged.<\/p>\r\n\r\n<div id=\"headwrapper\">\r\n  <div id=\"fixedheader\">\r\n    <header id=\"top\">\r\n      <div id=\"logo\">\r\n        <!-- Logo Source: http:\/\/www.psdgraphics.com\/psd\/psd-power-button\/ -->\r\n        <h1><a href=\"index.html\"><img src=\"https:\/\/assets.hongkiat.com\/uploads\/smart-header-footers-jquery\/power-logo.png\" alt=\"Smart Auto-Hide Header\"><\/a><\/h1>\r\n        <h2>intelligent auto-hide effect<\/h2>\r\n\r\n        <ul id=\"rightlinks\">\r\n          <li><a href=\"javascript:void(0)\">Register<\/a><\/li> -\r\n          <li><a href=\"javascript:void(0)\">Login<\/a><\/li> -\r\n          <li><a href=\"javascript:void(0)\">FAQ\/Wiki<\/a><\/li> -\r\n          <li><a href=\"javascript:void(0)\">Support<\/a><\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <nav id=\"topnav\">\r\n        <ul>\r\n          <li><a href=\"javascript:void(0)\">Homepage<\/a><\/li>\r\n          <li><a href=\"javascript:void(0)\">About Us<\/a><\/li>\r\n          <li><a href=\"javascript:void(0)\">Publications<\/a><\/li>\r\n          <li><a href=\"javascript:void(0)\">Authors<\/a><\/li>\r\n          <li><a href=\"javascript:void(0)\">Other Projects<\/a><\/li>\r\n          <li><a href=\"javascript:void(0)\">Get In Touch<\/a><\/li>\r\n        <\/ul>\r\n      <\/nav>\r\n    <\/header>\r\n  <\/div> <!-- \/end #fixedheader -->\r\n<\/div> <!-- \/end #headwrapper -->\r\n\r\n<\/pre>\n
The header area consists of several nested divs, and I\u2019ll start by breaking down the structure. The outermost layer, #headwrapper<\/strong>, is set to a fixed width of 780px and centered on the page using margin: 0 auto; in the CSS. Enclosed within is the #fixedheader<\/strong> div, which serves as the primary fixed element.<\/p>\n
This div is styled with a grey background and positioned at the top of the page using negative margins. This positioning is crucial for the animation effect, allowing the header to smoothly transition upwards. Without this, the space behind the animating header would be exposed.<\/p>\n
The <header><\/code> element within functions as the core container, housing the logo and navigation bar. This setup enables a subtle pull-down effect before the header ascends, which you can observe in the live demonstration.<\/p>\n
Foundation CSS Styling<\/h2>\n
Understanding the HTML structure is straightforward, with all internal content areas aligned perfectly with the header\u2019s edges. Let\u2019s dive into styling our layout, starting with some basic CSS resets to ensure consistency across browsers.<\/p>\n
\r\nhtml, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  font-size: 100%;\r\n  font: inherit;\r\n  vertical-align: baseline;\r\n  outline: none;\r\n  -webkit-font-smoothing: antialiased;\r\n  -webkit-text-size-adjust: 100%;\r\n  -webkit-box-sizing: border-box;\r\n  -moz-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n  height: 101%;\r\n}\r\n\r\nbody {\r\n  background: #a4b1c2;\r\n  font-family: Tahoma, Arial, sans-serif;\r\n  font-size: 62.5%;\r\n  line-height: 1;\r\n}\r\n\r\n::selection {\r\n  background: #f2c6dc;\r\n  color: #111;\r\n}\r\n\r\n::-moz-selection {\r\n  background: #f2c6dc;\r\n  color: #111;\r\n}\r\n\r\n::-webkit-selection {\r\n  background: #f2c6dc;\r\n  color: #111;\r\n}\r\n\r\nbr {\r\n  line-height: 1.95em;\r\n}\r\n\r\narticle,\r\naside,\r\ndetails,\r\nfigcaption,\r\nfigure,\r\nfooter,\r\nheader,\r\nhgroup,\r\nmenu,\r\nnav,\r\nsection {\r\n  display: block;\r\n}\r\n\r\nol,\r\nul {\r\n  list-style: none;\r\n}\r\n\r\nblockquote,\r\nq {\r\n  quotes: none;\r\n}\r\n\r\nblockquote:before,\r\nblockquote:after,\r\nq:before,\r\nq:after {\r\n  content: '';\r\n  content: none;\r\n}\r\n\r\nstrong {\r\n  font-weight: bold;\r\n}\r\n\r\ntable {\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\nimg {\r\n  border: 0;\r\n  max-width: 100%;\r\n}\r\n\r\na {\r\n  color: #7091c7;\r\n}\r\n\r\na:hover {\r\n  color: #4e72ad;\r\n}\r\n\r\n<\/pre>\n
Many of these styles utilize CSS3 features like gradients and transition effects, enhancing the visual appeal of your design. Most modern browsers support these properties well, and for those that don\u2019t, the fallback is simply to not render the effect, which isn\u2019t a significant compromise.<\/p>\n
\r\n#toparrow {\r\n  display: none;\r\n  width: 130px;\r\n  height: 130px;\r\n  position: fixed;\r\n  bottom: 45px;\r\n  right: 45px;\r\n  cursor: pointer;\r\n  background: url('https:\/\/assets.hongkiat.com\/uploads\/smart-header-footers-jquery\/scrolltop-arrow.png') 0 0 no-repeat;\r\n  z-index: 9999;\r\n}\r\n\r\n<\/pre>\n
This final snippet of code introduces a top arrow icon on the page. Positioned fixedly on the right, it becomes visible only after the header hides, offering users a quick way to return to the top of the page-a handy alternative to scrolling.<\/p>\n
Bringing the Header and Footer to Life<\/h2>\n
In the JavaScript file, we weave several logic paths, responding to window scroll events with various actions. To make the code\u2019s purpose clear, I\u2019ve annotated each if{}<\/code> statement with comments. We\u2019ll dissect this into three primary segments.<\/p>\n
\r\n$(document).ready(function(){\r\n  var timer;\r\n\r\n  $(window).scroll(function() {\r\n\r\n    var topdisplay = $('#fixedheader').css('top');\r\n    var footdisplay = $('#fixedfooter ul').css('display');\r\n    var scrolltoppx = $(this).scrollTop();\r\n\r\n<\/pre>\n
Our initial segment sets up an event listener alongside a few newly declared variables. topdisplay<\/code> examines the CSS top property status of our header. Initially set to -35px, this means the header shows by default. If hidden, we\u2019ll animate it back into view. The footdisplay<\/code> variable tracks the footer\u2019s display status, instrumental for toggling visibility. Additionally, scrolltoppx<\/code> captures the scroll distance from the top, refreshing on each scroll event.<\/p>\n
\r\nif(scrolltoppx < 10 && topdisplay != \"-35\") {\r\n    \/\/ if we scroll up from below 10px and the header is not in its default position,\r\n    \/\/ smoothly reveal the header\r\n    clearTimeout(timer);\r\n    autoDisplayHeader();\r\n    $('#toparrow').fadeOut(350);\r\n} \r\n \r\nif(scrolltoppx > 130 && topdisplay == \"-35\") {\r\n    \/\/ if scrolling down beyond 130px with the header in its default position,\r\n    \/\/ delay then hide the header\r\n    clearTimeout(timer); \r\n    timer = setTimeout(function() {\r\n        autoHideHeader();\r\n        $('#toparrow').fadeIn(450);\r\n    }, 600);\r\n}\r\n\r\n<\/pre>\n
Here we delve into the core logic that triggers our predefined JavaScript functions.<\/p>\n
The initial condition checks if the header isn\u2019t at its default position (-35px) and we\u2019re scrolling up towards the top of the page. In this scenario, we activate autoDisplayHeader()<\/code> to reveal the header. This function is detailed further in the JavaScript file.<\/p>\n
If scrolling down past 130px with the header visible, we invoke autoHideHeader()<\/code> to conceal it. This action is scheduled with a setTimeout()<\/code> function, introducing a 600ms delay after scrolling ceases before the header hides and the \u201cback to top\u201d arrow appears.<\/p>\n
\r\nif(scrolltoppx + $(window).height() == getDocHeight()) {\r\n    \/\/ Trigger when the window's scroll position plus its height equals the document's total height,\r\n    \/\/ indicating the user has reached the page bottom. Here, the footer is shown quickly.\r\n    if(footdisplay == 'none') {\r\n        $('#fixedfooter ul').fadeIn(300);\r\n    }\r\n}\r\n\r\nif(scrolltoppx + $(window).height() != getDocHeight() && footdisplay == 'block') {\r\n    \/\/ Conversely, if not at the bottom and the footer is visible,\r\n    \/\/ it is hidden until the bottom is reached again.\r\n    $('#fixedfooter ul').fadeOut(300);\r\n}\r\n\r\n});\r\n\r\n$('#toparrow').click(function() {\r\n    \/\/ This enables immediate scrolling to the top of the page upon clicking the arrow.\r\n    $(\"html, body\").animate({ scrollTop: \"0\" });\r\n});\r\n\r\n<\/pre>\n
The subsequent statements address the footer\u2019s visibility, calculating the user\u2019s position plus the remaining page height to match the overall window height, as determined by getDocHeight()<\/code>. This function, credited to James Padolsey<\/a>, enhances compatibility with older browsers.<\/p>\n
Another condition reverses this logic, hiding the footer when scrolling away from the page bottom.<\/p>\n
The concluding part listens for clicks on the #toparrow<\/code> div, distinct from the scroll event handler, thus representing the two primary event responses on the page.<\/p>\n
While the custom functions might require some study to fully grasp, their implementation is straightforward. Their definitions are provided below for reference.<\/p>\n
\r\nfunction autoHideHeader() {\r\n    $('#fixedheader').animate({\r\n        top: '-149px',\r\n    }, 450, 'easeInBack');\r\n\r\n    $('#pagewrapper').animate({\r\n        'margin-top': '3px',\r\n    }, 450, 'easeInBack');\r\n}\r\n\r\nfunction autoDisplayHeader() {\r\n    $('#fixedheader').animate({\r\n        top: '-35px',\r\n    }, 400, 'easeOutBack');\r\n\r\n    $('#pagewrapper').animate({\r\n        'margin-top': '117px',\r\n    }, 400, 'easeOutBack');\r\n}\r\n\r\nfunction getDocHeight() {\r\n    var D = document;\r\n\r\n    return Math.max(\r\n        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),\r\n        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),\r\n        Math.max(D.body.clientHeight, D.documentElement.clientHeight)\r\n    );\r\n}\r\n\r\n<\/pre>\n
For users on older browsers or with JavaScript disabled, the loss of functionality is minimal. The header remains fixed at all times, providing easy access without affecting the browsing experience. This enhancement simply adds sophistication and a cleaner interface for users.<\/p>\n
Don\u2019t forget to view my live demo for a comprehensive look at this web application.<\/p>\n
\"Preview<\/figure>\n
<\/i>  See demo <\/span><\/a>\n<\/i>  Download source <\/span><\/a><\/p>\n
Concluding Remarks<\/h2>\n
I hope this guide offers valuable insights for web developers. The code provided can easily be adapted with minimal tweaks to the CSS, making it a versatile addition to your toolkit. I encourage you to download the demo project to have this functional template at your disposal.<\/p>\n
If you have any comments or questions about this tutorial, I welcome your feedback in the discussion section below.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"
Using a sticky header navigation on your website offers several benefits, including easy navigation to key links and a quick return to the homepage from any part of your site. Yet, a navigation bar that obstructs content can cause issues. In this guide, we\u2019ll show you how to create a header bar that locks in…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[911],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Create Auto-Hiding Headers and Footers with jQuery - Hongkiat<\/title>\n<meta name=\"description\" content=\"Using a sticky header navigation on your website offers several benefits, including easy navigation to key links and a quick return to the homepage from\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Auto-Hiding Headers and Footers with jQuery\" \/>\n<meta property=\"og:description\" content=\"Using a sticky header navigation on your website offers several benefits, including easy navigation to key links and a quick return to the homepage from\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-17T15:01:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:34:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/smart-header-footers-jquery\/autohiding-header-footer-tutorial-preview.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/smart-header-footers-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/smart-header-footers-jquery\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"How to Create Auto-Hiding Headers and Footers with jQuery\",\"datePublished\":\"2013-06-17T15:01:41+00:00\",\"dateModified\":\"2025-04-03T17:34:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/smart-header-footers-jquery\\\/\"},\"wordCount\":922,\"commentCount\":15,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/smart-header-footers-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/smart-header-footers-jquery\\\/autohiding-header-footer-tutorial-preview.jpg\",\"keywords\":[\"jQuery\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/smart-header-footers-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/smart-header-footers-jquery\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/smart-header-footers-jquery\\\/\",\"name\":\"How to Create Auto-Hiding Headers and Footers with jQuery - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/smart-header-footers-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/smart-header-footers-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/smart-header-footers-jquery\\\/autohiding-header-footer-tutorial-preview.jpg\",\"datePublished\":\"2013-06-17T15:01:41+00:00\",\"dateModified\":\"2025-04-03T17:34:07+00:00\",\"description\":\"Using a sticky header navigation on your website offers several benefits, including easy navigation to key links and a quick return to the homepage from\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/smart-header-footers-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/smart-header-footers-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/smart-header-footers-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/smart-header-footers-jquery\\\/autohiding-header-footer-tutorial-preview.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/smart-header-footers-jquery\\\/autohiding-header-footer-tutorial-preview.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/smart-header-footers-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Auto-Hiding Headers and Footers with jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create Auto-Hiding Headers and Footers with jQuery - Hongkiat","description":"Using a sticky header navigation on your website offers several benefits, including easy navigation to key links and a quick return to the homepage from","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Auto-Hiding Headers and Footers with jQuery","og_description":"Using a sticky header navigation on your website offers several benefits, including easy navigation to key links and a quick return to the homepage from","og_url":"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-06-17T15:01:41+00:00","article_modified_time":"2025-04-03T17:34:07+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/smart-header-footers-jquery\/autohiding-header-footer-tutorial-preview.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"How to Create Auto-Hiding Headers and Footers with jQuery","datePublished":"2013-06-17T15:01:41+00:00","dateModified":"2025-04-03T17:34:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/"},"wordCount":922,"commentCount":15,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/smart-header-footers-jquery\/autohiding-header-footer-tutorial-preview.jpg","keywords":["jQuery"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/","url":"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/","name":"How to Create Auto-Hiding Headers and Footers with jQuery - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/smart-header-footers-jquery\/autohiding-header-footer-tutorial-preview.jpg","datePublished":"2013-06-17T15:01:41+00:00","dateModified":"2025-04-03T17:34:07+00:00","description":"Using a sticky header navigation on your website offers several benefits, including easy navigation to key links and a quick return to the homepage from","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/smart-header-footers-jquery\/autohiding-header-footer-tutorial-preview.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/smart-header-footers-jquery\/autohiding-header-footer-tutorial-preview.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/smart-header-footers-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Auto-Hiding Headers and Footers with jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4wV","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17417"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17417\/revisions"}],"predecessor-version":[{"id":73605,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17417\/revisions\/73605"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17417"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}