<style>/*<!--<head>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=d1948a70-e851-4fb6-9253-113ed30c4f99' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=d1948a70-e851-4fb6-9253-113ed30c4f99' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1633184471074840&host=ca-host-pub-1556223355139109" crossorigin="anonymous"></script>

<!-- data-ad-client=ca-pub-1633184471074840 -->

</head>--></head><body data-lang='default' data-theme='default' id='nB'>*/</style>

[Updated] How to make header or navigation bar sticky while scrolling

Anupam September 16, 2022 - 1 min read

How to make header or navigation bar sticky while scrolling

Hello, guys In this tutorial we will learn how to create sticky navigation bar on scroll using JavaScript

Have you noticed the menu bar that doesn’t move when you scroll up and down a site? That is a Sticky header. It is one of the most popular design trends that many web designers make use of today to improve user experience on their websites. If you would like to implement a sticky header , here is an article for you.

What Is a Sticky Header?

Sticky header or Sticky navigation bar simply refers to the top navigation menu that remains visible on the screen while users scroll up and down the site.

How to make header or navigation bar sticky

Please follow the video tutorial this will more help you to understand.

Watch tutorial Download

We hope this article helped you to make sticky navigation bar while scroll, If you liked this article, then please subscribe to our YouTube Channel

<style>/*
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3576124627-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY50mlskBpCRpQCQesbM2Yh9AAj0yQ:1726829265494';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2059347577744616049','//anutrickz.blogspot.com/2022/09/make-navigation-bar-sticky.html','2059347577744616049');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2059347577744616049', 'title': 'ANUTRICKZ', 'url': 'https://anutrickz.blogspot.com/2022/09/make-navigation-bar-sticky.html', 'canonicalUrl': 'https://anutrickz.blogspot.com/2022/09/make-navigation-bar-sticky.html', 'homepageUrl': 'https://anutrickz.blogspot.com/', 'searchUrl': 'https://anutrickz.blogspot.com/search', 'canonicalHomepageUrl': 'https://anutrickz.blogspot.com/', 'blogspotFaviconUrl': 'https://anutrickz.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-TS2WXBJ1XV', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': false, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22ANUTRICKZ - RSS\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/2059347577744616049/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/2736078609564376896/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-1633184471074840', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/bea942728df245a5', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Continue Reading \xbb', 'pageType': 'item', 'postId': '2736078609564376896', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZ9WQr6vGg4kjTwedfYYlVmrOVZB-zZSG6jgi1vtj13N2tgJb4f97vVyW5dP7CqCNkNvPURth6fvp5Qpv8wlQVeZoTX1UrM1H_BihJjM1JvKp1fdA15ybOwmUFi-BO1LgFz5BuotW5I0Cs0NyV8NOgGAy4G-Rx5YZhv1wIS3fGb-7Df5sz7Myxas1/s72-w640-c-h360/header%20sticky%20while%20scrolling.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZ9WQr6vGg4kjTwedfYYlVmrOVZB-zZSG6jgi1vtj13N2tgJb4f97vVyW5dP7CqCNkNvPURth6fvp5Qpv8wlQVeZoTX1UrM1H_BihJjM1JvKp1fdA15ybOwmUFi-BO1LgFz5BuotW5I0Cs0NyV8NOgGAy4G-Rx5YZhv1wIS3fGb-7Df5sz7Myxas1/w640-h360/header%20sticky%20while%20scrolling.png', 'pageName': '[Updated] How to make header or navigation bar sticky while scrolling', 'pageTitle': 'ANUTRICKZ: [Updated] How to make header or navigation bar sticky while scrolling', 'metaDescription': 'how to create sticky navigation bar on scroll using  JavaScript,What Is a Sticky Header,How to make header or navigation bar sticky'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': '[Updated] How to make header or navigation bar sticky while scrolling', 'description': 'how to create sticky navigation bar on scroll using  JavaScript,What Is a Sticky Header,How to make header or navigation bar sticky', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZ9WQr6vGg4kjTwedfYYlVmrOVZB-zZSG6jgi1vtj13N2tgJb4f97vVyW5dP7CqCNkNvPURth6fvp5Qpv8wlQVeZoTX1UrM1H_BihJjM1JvKp1fdA15ybOwmUFi-BO1LgFz5BuotW5I0Cs0NyV8NOgGAy4G-Rx5YZhv1wIS3fGb-7Df5sz7Myxas1/w640-h360/header%20sticky%20while%20scrolling.png', 'url': 'https://anutrickz.blogspot.com/2022/09/make-navigation-bar-sticky.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2736078609564376896}}, {'name': 'widgets', 'data': [{'title': 'ANUTRICKZ (Header)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header1'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'postContent', 'id': 'Blog1', 'posts': [{'id': '2736078609564376896', 'title': '[Updated] How to make header or navigation bar sticky while scrolling', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZ9WQr6vGg4kjTwedfYYlVmrOVZB-zZSG6jgi1vtj13N2tgJb4f97vVyW5dP7CqCNkNvPURth6fvp5Qpv8wlQVeZoTX1UrM1H_BihJjM1JvKp1fdA15ybOwmUFi-BO1LgFz5BuotW5I0Cs0NyV8NOgGAy4G-Rx5YZhv1wIS3fGb-7Df5sz7Myxas1/w640-h360/header%20sticky%20while%20scrolling.png', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'timestamp', 'label': ''}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': ''}]}, {'title': 'Popular posts', 'type': 'PopularPosts', 'sectionId': 'popular', 'id': 'PopularPosts2', 'posts': [{'title': 'How To Add Custom Google Translate Button On Your Website?', 'id': 5371994812086292964}, {'title': ' Anti Adblock Script for blogger | How to Add Adblock detection script [ 2022 ] ', 'id': 9130507176988353748}, {'title': '[ UPDATED ] How To Add Copy And Share Buttons In Blockquotes', 'id': 4111069201761851050}, {'title': 'How To Add Custom Google Translate Button On your Website?', 'id': 6486639804398665261}, {'title': 'How to Create Automatic Safelinks on Blogger\x27s Main Blog', 'id': 4387528619928926608}]}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'postContent', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts2', 'popular', document.getElementById('PopularPosts2'), {}, 'displayModeFull'));
</script>
</body>*/</style>

What Is a Sticky Header?

How to make header or navigation bar sticky

How To Add Custom Google Translate Button On Your Website?

Anti Adblock Script for blogger | How to Add Adblock detection script [ 2022 ]

[ UPDATED ] How To Add Copy And Share Buttons In Blockquotes

How To Add Custom Google Translate Button On your Website?

How to Create Automatic Safelinks on Blogger's Main Blog