{"id":16791325,"url":"https://github.com/trungvose/resizing-header-on-scroll","last_synced_at":"2025-07-10T15:36:39.046Z","repository":{"id":91337659,"uuid":"59878978","full_name":"trungvose/resizing-header-on-scroll","owner":"trungvose","description":"When you scroll down the page a bit, the header resizes smaller with CSS3 animations, and gets back bigger when you scroll back to the top","archived":false,"fork":false,"pushed_at":"2019-08-22T07:15:53.000Z","size":45,"stargazers_count":20,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-10T23:35:20.473Z","etag":null,"topics":["bootstrap","html","jquery","navbar","navbar-default","navigation","padding","scrolling"],"latest_commit_sha":null,"homepage":"https://trungk18.com/tutorial/resizing-header-on-scrolling/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trungvose.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-05-28T05:32:07.000Z","updated_at":"2023-04-14T09:09:11.000Z","dependencies_parsed_at":"2023-06-04T13:00:17.009Z","dependency_job_id":null,"html_url":"https://github.com/trungvose/resizing-header-on-scroll","commit_stats":null,"previous_names":["trungvose/resizing-header-on-scroll"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/trungvose/resizing-header-on-scroll","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trungvose%2Fresizing-header-on-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trungvose%2Fresizing-header-on-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trungvose%2Fresizing-header-on-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trungvose%2Fresizing-header-on-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trungvose","download_url":"https://codeload.github.com/trungvose/resizing-header-on-scroll/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trungvose%2Fresizing-header-on-scroll/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260340221,"owners_count":22994437,"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":["bootstrap","html","jquery","navbar","navbar-default","navigation","padding","scrolling"],"created_at":"2024-10-13T08:34:32.686Z","updated_at":"2025-06-17T10:33:48.811Z","avatar_url":"https://github.com/trungvose.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Shrinking Navigation Bar When Scrolling Down - Bootstrap 3 Navigation \u0026 jQuery\n**Demo**: https://trungk18.com/resizing-header-on-scroll/\n\nIn this template, I will show you how to create an animated fixed navigation that will resize on scroll and when you scroll down the page a bit, the header resizes smaller, and gets back bigger when you scroll back to the top with just simple CSS3 animation and jQuery.\n\n#### Sticky Navigation\n\n\u003e To make a sticky nav you need to add the class navbar-fixed-top to your nav\n\nOfficial documentation:\nhttp://getbootstrap.com/components/#navbar-fixed-top\n \nLet's now take a look at our HTML markup. The markup consists of a header with a logo and navigation, some sections with color difference only. \n\n```html\n\u003c!-- Navigation --\u003e\n    \u003cnav class=\"navbar navbar-default navbar-fixed-top\"\u003e\n        \u003cdiv class=\"container\"\u003e\n            \u003c!-- Brand and toggle get grouped for better mobile display --\u003e\n            \u003cdiv class=\"navbar-header page-scroll\"\u003e\n                \u003cbutton type=\"button\" class=\"navbar-toggle\" data-toggle=\"collapse\" data-target=\"#top-nav\"\u003e\n                    \u003cspan class=\"sr-only\"\u003eToggle navigation\u003c/span\u003e\n                    \u003cspan class=\"icon-bar\"\u003e\u003c/span\u003e\n                    \u003cspan class=\"icon-bar\"\u003e\u003c/span\u003e\n                    \u003cspan class=\"icon-bar\"\u003e\u003c/span\u003e\n                \u003c/button\u003e\n                \u003ca class=\"brand\" href=\"http://trungk18.github.io/\"\u003e\u003cimg src=\"trungk18.png\" class=\"img-responsive\" title=\"trungk18\" /\u003e\u003c/a\u003e\n            \u003c/div\u003e\n            \u003c!-- Collect the nav links, forms, and other content for toggling --\u003e\n            \u003cdiv class=\"collapse navbar-collapse\" id=\"top-nav\"\u003e\n                \u003cul class=\"nav navbar-nav navbar-right\"\u003e\n                    \u003cli class=\"page-scroll\"\u003e\n                        \u003ca href=\"#portfolio\"\u003ePortfolio\u003c/a\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"page-scroll\"\u003e\n                        \u003ca href=\"#about\"\u003eAbout\u003c/a\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"page-scroll\"\u003e\n                        \u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\n                    \u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/div\u003e\n            \u003c!-- /.navbar-collapse --\u003e\n        \u003c/div\u003e\n        \u003c!-- /.container-fluid --\u003e\n    \u003c/nav\u003e\n\n    \u003c!-- Content Section --\u003e\n    \u003cdiv class=\"content\"\u003e\n        \u003csection id=\"portfolio\"\u003e\u003c/section\u003e\n        \u003csection id=\"about\"\u003e\u003c/section\u003e\n        \u003csection id=\"contact\"\u003e\u003c/section\u003e\n    \u003c/div\u003e\n```\n\nI am using navbar-default from bootstrap with navbar-fixed-top to make it stick to the top of webpage. The HTML is fairly straightforward. \n\n#### Now take a look at CSS.\n\nClass .navbar-default was set the padding top and down for 30px each, and the transition is based on padding. When the navbar gets resized on scroll, I shrink the value to 10px by adding child class navbar-shrink.\nFinally, I added some example media queries so that our animated resizing navigation will work only in medium devices desktops [Bootstrap standard grid](http://getbootstrap.com/css/#grid). \n\n```css\n    @media screen and (min-width: 992px) {\n\n        .navbar-default {\n            padding: 30px 0;\n            transition: padding 0.3s;\n        }\n\n            .navbar-default.navbar-shrink {\n                padding: 10px 0;\n            }\n    }\n\n    .navbar-default a {\n        color: #4D4D4D;\n        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        text-transform: uppercase;\n        text-decoration: none;\n        line-height: 42px;\n        font-weight: 700;\n        font-size: 20px;\n    }\n\n    .navbar-default a.brand \u003e img {            \n        max-width: 70px;\n    }\n\n        .navbar-default a.active {\n            color: #2dbccb;\n        }\n\n\n    .content {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n    }\n\n        .content \u003e section {\n            width: 100%;\n            height: 100%;\n        }\n\n    #portfolio {\n        background: #2dbccb;\n    }\n\n    #about {\n        background-color: #eb7e7f;\n    }\n\n    #contact {\n        background-color: #415c71;\n    }\n```\n\nTo make it happen, I am going to use jQuery to add and remove the class *navbar-shrink* when we scroll a certain amount (in this situation is 50px). Adding and removing this class will animate the navbar.\n\n```javascript\n    $(document).ready(function () {\n        $(window).scroll(function () {\n\n            //Method 1: Using addClass and removeClass\n            //if ($(document).scrollTop() \u003e 50) {\n            //    $('.navbar-default').addClass('navbar-shrink');\n            //} else {\n            //    $('.navbar-default').removeClass('navbar-shrink');\n            //}\n\n            //Method 2: Using toggleClass\n            $(\".navbar-default\").toggleClass(\"navbar-shrink\", $(this).scrollTop() \u003e 50)\n        });\n    });\n```\nWe can use [toggleClass](http://api.jquery.com/toggleclass/) with 2 parameter. \n- The *first parameter* will be the target element.\n- The *second parameter* for determining whether the class should be added or removed. If this parameter's value is true, then the class is added; if false, the class is removed.\n\n#### Conclusion\nNowadays it is not really hard to search for component we need to use in our front-end project, but the most important thing is you can understand how it's worked and you can easily implement this animated resizing header into your next project.\nThanks for checking it out and view the demo, feel free to fork and fix the source code then pull back to me.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrungvose%2Fresizing-header-on-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrungvose%2Fresizing-header-on-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrungvose%2Fresizing-header-on-scroll/lists"}