{"id":22345564,"url":"https://github.com/gerhynes/sticky-nav","last_synced_at":"2025-03-26T10:14:31.748Z","repository":{"id":106048036,"uuid":"108894946","full_name":"gerhynes/sticky-nav","owner":"gerhynes","description":"A page built to practice making a sticky nav using just vanilla JavaScript. Built for Wes Bos' JavaScript 30 course. ","archived":false,"fork":false,"pushed_at":"2018-02-04T10:13:28.000Z","size":5,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-01-31T11:34:28.101Z","etag":null,"topics":["javascript","javascript30"],"latest_commit_sha":null,"homepage":"https://gk-hynes.github.io/sticky-nav/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gerhynes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-30T18:55:55.000Z","updated_at":"2018-02-03T21:39:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"fcfab3da-a98d-4882-af45-89e0354ab95a","html_url":"https://github.com/gerhynes/sticky-nav","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fsticky-nav","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fsticky-nav/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fsticky-nav/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fsticky-nav/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gerhynes","download_url":"https://codeload.github.com/gerhynes/sticky-nav/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245632415,"owners_count":20647194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","javascript30"],"created_at":"2024-12-04T09:18:06.757Z","updated_at":"2025-03-26T10:14:31.742Z","avatar_url":"https://github.com/gerhynes.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sticky Nav\n\nA page built to practice making a sticky nav using just vanilla JavaScript. Built for Wes Bos' [JavaScript 30](https://javascript30.com/) course.\n\n[![Screenshot of the sticky nav page](https://res.cloudinary.com/gerhynes/image/upload/v1517694082/Screenshot-2018-2-3_Sticky_Nav_soyswq.png)](https://gk-hynes.github.io/sticky-nav/)\n\n## Notes\n\nFirst select the nav.\n\nMake a function, `fixNav`, that will run on page scroll.\n\nWhat you need to do is figure out how far the nav is from the top of the page, how far you have scrolled, and make the nav fixed when those two numbers coincide.\n\nInside `fixNav`, if `window.scrollY` is greater than or equal to `topOfNav`, add a class of `fixed-nav` to the body (this way you can target elements other than just the nav).\n\nIn your CSS, when there is a class of `fixed-nav`, the nav will have `position: fixed` and a `box-shadow`.\n\nAt this point, the nav is working but when it becomes fixed the content jumps up. This happens because when you make the nav fixed it is no longer taking up space in the document. This causes a reflow on the page.\n\nYou need to offset the body by the same amount as the now-fixed nav.\n\n```js\nfunction fixNav() {\n  if (window.scrollY \u003e= topOfNav) {\n    document.body.style.paddingTop = nav.offsetHeight + \"px\";\n    document.body.classList.add(\"fixed-nav\");\n  } else {\n    document.body.style.paddingTop = 0;\n    document.body.classList.remove(\"fixed-nav\");\n  }\n}\n```\n\nThe nav has, by default, a hidden logo.\n\nTo make the logo appear, when the body has a class of `fixed-nav` give the li with a class of `logo` a `max-width` bigger than it would ever need to be.\n\n```css\n.fixed-nav li.logo {\n  max-width: 500px;\n}\n```\n\nYou can't just use `width: auto` because you cannot animate the width of something to be from 0 to `auto`. You need to use `max-width` to get the transition to occur.\n\nFinally, the blog content has a class of `site-wrap` set to `scale(0.98)`. When there is a class of `fixed-nav`, make the content scale up to 1.\n\n```css\n.fixed-nav .site-wrap {\n  transform: scale(1);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fsticky-nav","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerhynes%2Fsticky-nav","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fsticky-nav/lists"}