<commit_before>---
title: "Shrinking navigation bar when scrolling with CSS and jQuery"
categories: css tutorial jquery
---

In this tutorial, 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.

- [Demo](http://trungk18.github.io/Resizing-Header-On-Scroll)
- [Github](https://github.com/trungk18/Resizing-Header-On-Scroll)

### Sticky Navigation
<commit_msg>Update codepen<commit_after>---
title: "Shrinking navigation bar when scrolling with CSS and jQuery"
categories: css tutorial jquery
---

In this tutorial, 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.

- [Github](https://github.com/trungk18/Resizing-Header-On-Scroll)
- [Demo](http://trungk18.github.io/Resizing-Header-On-Scroll)
- Codepen, please click to view in full screen.

<iframe height='265' scrolling='no' title='Shrinking Navigation Bar When Scrolling Down' src='//codepen.io/trungk18/embed/opazdV/?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/trungk18/pen/opazdV/'>Shrinking Navigation Bar When Scrolling Down</a> by <NAME> (<a href='https://codepen.io/trungk18'>@trungk18</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

### Sticky Navigation

{'fraction_non_alphanumeric': 0.11722488038277512, 'fraction_numerical': 0.017344497607655503, 'mean_word_length': 5.03971119133574, 'pattern_counts': {'":': 0, '<': 12, '<?xml version=': 0, '>': 12, 'https://': 5, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6264651', 'n_tokens_mistral': 526, 'n_tokens_neox': 499, 'n_words': 179}