{"id":6741,"date":"2017-02-16T10:33:02","date_gmt":"2017-02-16T00:33:02","guid":{"rendered":"https:\/\/codemyui.com\/?p=6741"},"modified":"2018-05-16T17:00:04","modified_gmt":"2018-05-16T07:00:04","slug":"sidebar-menu-scroll-progress-indicator","status":"publish","type":"post","link":"https:\/\/codemyui.com\/sidebar-menu-scroll-progress-indicator\/","title":{"rendered":"Sidebar Menu Scroll Progress Indicator"},"content":{"rendered":"<p>This is a great snippet by <a href=\"https:\/\/twitter.com\/hakimel\" target=\"_blank\" rel=\"noopener\">Hakim El Hattab<\/a> where you can see a scroll progress indicator that highlights sections of a page that are currently in view. You have a <a href=\"https:\/\/codemyui.com\/tag\/navigation-menu\/\">navigation men<\/a>u on the left sidebar and as you scroll there is a <a href=\"https:\/\/codemyui.com\/tag\/progress-bar\/\">progress indicator<\/a> that moves along the menu to indication which section of the page is active. This will work great when you have a long form <a href=\"https:\/\/codemyui.com\/tag\/article\/\">article<\/a>. <\/p>\n<p><!--more--><\/p>\n<p>If you are looking for a <a href=\"https:\/\/codemyui.com\/navbar-scroll-indicator-articles\/\">scroll indicator in the top nav bar check out this snippet<\/a>. <\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/4b546d06f38013d3bd492b5eba2772c7\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Scroll Progress Indicator Snippet<\/h2>\n<p class='codepen'  data-height='581' data-theme-id='0' data-slug-hash='BpKNPg' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Progress Nav by Hakim El Hattab (@hakimel) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This is a great snippet by Hakim El Hattab where you can see a scroll progress indicator that highlights sections of a page that are currently in view. You have a navigation menu on the left sidebar and as you scroll there is a progress indicator that moves along the menu to indication which section&hellip;<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/sidebar-menu-scroll-progress-indicator\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":6763,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[3867,36516635,1520705,904900,138009468,64851],"class_list":["post-6741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-article","tag-click-animation","tag-navigation-menu","tag-progress-bar","tag-scroll-animation","tag-sidebar","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/sidebar-menu-scroll-progress-indicator.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":1395,"url":"https:\/\/codemyui.com\/navbar-scroll-indicator-articles\/","url_meta":{"origin":6741,"position":0},"title":"Navbar Scroll Indicator for Articles","author":"Hima Vincent","date":"August 4, 2016","format":false,"excerpt":"Showing reading time or a progress indicator on articles is a relatively new trend, now you can do that for your next project with this snippet. There are 2 variation one with JS and one in pure CSS. The initial version was designed by Derek Palladino and the pure CSS\u2026","rel":"","context":"In \"article\"","block_context":{"text":"article","link":"https:\/\/codemyui.com\/tag\/article\/"},"img":{"alt_text":"Navbar Scroll Indicator for Articles","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/navbar-scroll-indicator-for-articles.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/navbar-scroll-indicator-for-articles.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/navbar-scroll-indicator-for-articles.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/navbar-scroll-indicator-for-articles.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26777,"url":"https:\/\/codemyui.com\/sticky-sidebar-navigation-on-scroll\/","url_meta":{"origin":6741,"position":1},"title":"Sticky Sidebar Navigation on Scroll","author":"Saijo George","date":"August 21, 2018","format":false,"excerpt":"With this amazing snippet by Chris Coyier you have a sticky sidebar with jump links to the various sections on the page. When you scroll down the page and hit the section with this menu it sticks on the right-hand side till that content block runs out. If you are\u2026","rel":"","context":"In \"navigation menu\"","block_context":{"text":"navigation menu","link":"https:\/\/codemyui.com\/tag\/navigation-menu\/"},"img":{"alt_text":"Sticky Sidebar Navigation on Scroll","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Sticky-Sidebar-Navigation-on-Scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Sticky-Sidebar-Navigation-on-Scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Sticky-Sidebar-Navigation-on-Scroll.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Sticky-Sidebar-Navigation-on-Scroll.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29257,"url":"https:\/\/codemyui.com\/jump-link-sidebar-navigation-for-articles\/","url_meta":{"origin":6741,"position":2},"title":"Jump Link Sidebar Navigation for Articles","author":"Saijo George","date":"January 15, 2020","format":false,"excerpt":"If you are doing long-form article it's helpful to break it up into smaller sections and with this snippet, by Bramus you can add jump-links to those sections with a sticky sidebar navigation menu. If you are having trouble with the pen, try the archived copy on GitHub Sidebar Jump\u2026","rel":"","context":"In \"UX\"","block_context":{"text":"UX","link":"https:\/\/codemyui.com\/tag\/ux\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Jump-Link-Sidebar-Navigation-for-Articles.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Jump-Link-Sidebar-Navigation-for-Articles.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Jump-Link-Sidebar-Navigation-for-Articles.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Jump-Link-Sidebar-Navigation-for-Articles.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26562,"url":"https:\/\/codemyui.com\/hide-header-navigation-on-scroll-down-and-show-on-scroll-up\/","url_meta":{"origin":6741,"position":3},"title":"Hide Header Navigation on Scroll down and Show on Scroll Up","author":"Saijo George","date":"July 4, 2018","format":false,"excerpt":"In this simple code snippet, we see how we can hide the navigation menu when a user scrolls down and reveal it when they try to scroll up. This is a great UX trick to make use of all the available real estate on the screen for your content. This\u2026","rel":"","context":"In \"mobile optimised\"","block_context":{"text":"mobile optimised","link":"https:\/\/codemyui.com\/tag\/mobile-optimised\/"},"img":{"alt_text":"Hide Header Navigation on Scroll down and Show on Scroll Up","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hide-Header-Navigation-on-Scroll-down-and-Show-on-Scroll-Up.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hide-Header-Navigation-on-Scroll-down-and-Show-on-Scroll-Up.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hide-Header-Navigation-on-Scroll-down-and-Show-on-Scroll-Up.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hide-Header-Navigation-on-Scroll-down-and-Show-on-Scroll-Up.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26552,"url":"https:\/\/codemyui.com\/simple-sticky-navigation-menu\/","url_meta":{"origin":6741,"position":4},"title":"Simple Sticky Navigation Menu","author":"Saijo George","date":"June 29, 2018","format":false,"excerpt":"A very simple sticky header for your navigation menu designed by Marco Biedermann. When you scroll down the navigation menu gets stuck to the top of the page. If you are having trouble with the pen, try the archived copy on GitHub Sticky Navigation Snippet","rel":"","context":"In \"header\"","block_context":{"text":"header","link":"https:\/\/codemyui.com\/tag\/header\/"},"img":{"alt_text":"Simple Sticky Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Simple-Sticky-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Simple-Sticky-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Simple-Sticky-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Simple-Sticky-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":3238,"url":"https:\/\/codemyui.com\/ghost-solid-colour-nav-bar-scroll\/","url_meta":{"origin":6741,"position":5},"title":"Ghost to Solid Colour Nav Bar on Scroll","author":"Hima Vincent","date":"October 29, 2016","format":false,"excerpt":"In this snippet, you can configure the color and size of the navbar. Available colors: primary | secondary | white | ghost and available sizes: xl | lg | md | sm. When you scroll the navbar will change the color or size depending on what you have set. This\u2026","rel":"","context":"In \"navigation menu\"","block_context":{"text":"navigation menu","link":"https:\/\/codemyui.com\/tag\/navigation-menu\/"},"img":{"alt_text":"Ghost to Solid Colour Nav Bar on Scroll","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/ghost-to-solid-colour-nav-bar-on-scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/ghost-to-solid-colour-nav-bar-on-scroll.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/ghost-to-solid-colour-nav-bar-on-scroll.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/ghost-to-solid-colour-nav-bar-on-scroll.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/6741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=6741"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/6741\/revisions"}],"predecessor-version":[{"id":25929,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/6741\/revisions\/25929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/6763"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=6741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=6741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=6741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}