{"id":188,"date":"2014-04-02T17:12:59","date_gmt":"2014-04-02T17:12:59","guid":{"rendered":"https:\/\/learnwebcode.com\/?p=188"},"modified":"2016-03-15T03:56:13","modified_gmt":"2016-03-15T03:56:13","slug":"sticky-navigation-tutorial","status":"publish","type":"post","link":"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/","title":{"rendered":"Sticky Navigation Tutorial"},"content":{"rendered":"<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"http:\/\/www.youtube.com\/embed\/utonytGKodc?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>In this lesson we learn how to create a &#8220;sticky&#8221; navigation which is another way of saying an element should use &#8220;fixed&#8221; position once it would normally scroll out of view.<\/p>\n<p>In this lesson we make use of JavaScript and the jQuery library for event handling and conditional logic. If you are unfamiliar with JavaScript I recommend watching these two introductory videos:<\/p>\n<p><a href=\"https:\/\/learnwebcode.com\/javascript-and-jquery-tutorial-for-beginners\/\">Introduction to JavaScript with jQuery<\/a><br \/>\n<a href=\"https:\/\/learnwebcode.com\/jquery-variables-functions-and-conditional-logic\/\">Intermediate JavaScript with jQuery<\/a><\/p>\n<p><a href=\"https:\/\/learnwebcode.com\/tutorial-files\/sticky-navigation\/\">Link to demo page shown in lesson<\/a><br \/>\n<a href=\"https:\/\/learnwebcode.com\/tutorial-files\/sticky-navigation\/js\/script.js\">Direct link to &#8220;script.js&#8221; file<\/a><\/p>\n<p class=\"large-text\">Put together a neat page infused with JavaScript awesomeness and want to move it from your computer to online so the world can see your JS chops? The next step is to use a web host to share your site with the world. <a href=\"https:\/\/learnwebcode.com\/web-hosting\/\">Learn about web hosts, my favorite one, and how to get a plan for only $5.78 per month<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this lesson we learn how to create a &#8220;sticky&#8221; navigation which is another way of saying an element should use &#8220;fixed&#8221; position once it would normally scroll out of view. In this lesson we make use of JavaScript and the jQuery library for event handling and conditional logic. If you are unfamiliar with JavaScript [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-188","post","type-post","status-publish","format-standard","hentry","category-javascript-video-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Sticky Navigation Tutorial - LearnWebCode<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sticky Navigation Tutorial - LearnWebCode\" \/>\n<meta property=\"og:description\" content=\"In this lesson we learn how to create a &#8220;sticky&#8221; navigation which is another way of saying an element should use &#8220;fixed&#8221; position once it would normally scroll out of view. In this lesson we make use of JavaScript and the jQuery library for event handling and conditional logic. If you are unfamiliar with JavaScript [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"LearnWebCode\" \/>\n<meta property=\"article:published_time\" content=\"2014-04-02T17:12:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-03-15T03:56:13+00:00\" \/>\n<meta name=\"author\" content=\"Brad\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/\"},\"author\":{\"name\":\"Brad\",\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"headline\":\"Sticky Navigation Tutorial\",\"datePublished\":\"2014-04-02T17:12:59+00:00\",\"dateModified\":\"2016-03-15T03:56:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/\"},\"wordCount\":147,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"articleSection\":[\"JavaScript Video Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/\",\"url\":\"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/\",\"name\":\"Sticky Navigation Tutorial - LearnWebCode\",\"isPartOf\":{\"@id\":\"https:\/\/learnwebcode.com\/#website\"},\"datePublished\":\"2014-04-02T17:12:59+00:00\",\"dateModified\":\"2016-03-15T03:56:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learnwebcode.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sticky Navigation Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/learnwebcode.com\/#website\",\"url\":\"https:\/\/learnwebcode.com\/\",\"name\":\"LearnWebCode\",\"description\":\"Become a Web Developer\",\"publisher\":{\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/learnwebcode.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6\",\"name\":\"Brad\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"url\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"contentUrl\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\",\"width\":400,\"height\":400,\"caption\":\"Brad\"},\"logo\":{\"@id\":\"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg\"},\"url\":\"https:\/\/learnwebcode.com\/author\/lwcadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sticky Navigation Tutorial - LearnWebCode","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:\/\/learnwebcode.com\/sticky-navigation-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Sticky Navigation Tutorial - LearnWebCode","og_description":"In this lesson we learn how to create a &#8220;sticky&#8221; navigation which is another way of saying an element should use &#8220;fixed&#8221; position once it would normally scroll out of view. In this lesson we make use of JavaScript and the jQuery library for event handling and conditional logic. If you are unfamiliar with JavaScript [&hellip;]","og_url":"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/","og_site_name":"LearnWebCode","article_published_time":"2014-04-02T17:12:59+00:00","article_modified_time":"2016-03-15T03:56:13+00:00","author":"Brad","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Brad","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/#article","isPartOf":{"@id":"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/"},"author":{"name":"Brad","@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"headline":"Sticky Navigation Tutorial","datePublished":"2014-04-02T17:12:59+00:00","dateModified":"2016-03-15T03:56:13+00:00","mainEntityOfPage":{"@id":"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/"},"wordCount":147,"commentCount":7,"publisher":{"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"articleSection":["JavaScript Video Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/","url":"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/","name":"Sticky Navigation Tutorial - LearnWebCode","isPartOf":{"@id":"https:\/\/learnwebcode.com\/#website"},"datePublished":"2014-04-02T17:12:59+00:00","dateModified":"2016-03-15T03:56:13+00:00","breadcrumb":{"@id":"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/learnwebcode.com\/sticky-navigation-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learnwebcode.com\/"},{"@type":"ListItem","position":2,"name":"Sticky Navigation Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/learnwebcode.com\/#website","url":"https:\/\/learnwebcode.com\/","name":"LearnWebCode","description":"Become a Web Developer","publisher":{"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learnwebcode.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/learnwebcode.com\/#\/schema\/person\/db825ebc5a08e39b01de31771e4c7fe6","name":"Brad","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","url":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","contentUrl":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg","width":400,"height":400,"caption":"Brad"},"logo":{"@id":"https:\/\/learnwebcode.com\/wp-content\/uploads\/0UWl0Tet_400x400.jpg"},"url":"https:\/\/learnwebcode.com\/author\/lwcadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/comments?post=188"}],"version-history":[{"count":8,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/188\/revisions"}],"predecessor-version":[{"id":918,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/posts\/188\/revisions\/918"}],"wp:attachment":[{"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/media?parent=188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/categories?post=188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnwebcode.com\/wp-json\/wp\/v2\/tags?post=188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}