title: Sticky Header - buggy jumping when scrolling the page
body: <p>I'm using blogspot.com system to create my own blog.
  the problem is that the sticky navigation bar causes a small jump on the page while scrolling!
  this is the website if you want to understand clearly : <a href="https://www.wave4tech.net/" rel="nofollow noreferrer">https://www.wave4tech.net/</a>
  Also why the sticky nav is not appearing in mobile version of my site? these are my codes :</p>
  <p><strong>JQuery:</strong></p>
  <pre><code>&lt;script&gt;
  //&lt;![CDATA[
  $(function(){&quot;use strict&quot;;var minimumWidth;if(Modernizr.mq('(min-width: 0px)')){minimumWidth=function(width){return Modernizr.mq('(min-width: '+width+'px)');}}else{minWidth=function(width){return $window.width()&gt;=width;}}
  $(window).scroll(function(){var scroll=$(window).scrollTop();if(scroll&gt;300&amp;minimumWidth(1200)){$(&quot;.fbt_sticky_nav&quot;).addClass(&quot;sticky__nav&quot;);}else{$(&quot;.fbt_sticky_nav&quot;).removeClass(&quot;sticky__nav&quot;);}
  if(scroll&gt;400&amp;minimumWidth(1200)){$(&quot;.fbt_sticky_nav&quot;).addClass(&quot;nav_offset&quot;);}else{$(&quot;.fbt_sticky_nav&quot;).removeClass(&quot;nav_offset&quot;);}
  if(scroll&gt;500&amp;minimumWidth(1200)){$(&quot;.fbt_sticky_nav&quot;).addClass(&quot;scrolling_nav&quot;);}else{$(&quot;.fbt_sticky_nav&quot;).removeClass(&quot;scrolling_nav&quot;);}});$('.post-body').each(function(){$(this).find('iframe[src*=&quot;youtube.com&quot;]').removeAttr('width').removeAttr('height').removeAttr('data-thumbnail-src').removeAttr('frameborder').removeClass('YOUTUBE-iframe-video');$(this).find('iframe[src*=&quot;youtube.com&quot;], iframe[src*=&quot;player.vimeo.com&quot;], iframe[src*=&quot;facebook.com/plugins/video&quot;]').addClass('embed-responsive-item').wrap('&lt;div class=&quot;embed-responsive embed-responsive-16by9&quot;&gt;&lt;/div&gt;');});$('.item-view .post-body img').first().each(function(){$(this).parent().parent().remove();});$(&quot;#navbar.navbar-collapse&quot;).each(function(){$(this).find('#LinkList1 ul li').css('cssText','display: block');$(this).find(&quot;.navbar-nav li&quot;).addClass(&quot;nav-item&quot;);$(this).find(&quot;.navbar-nav li a&quot;).addClass(&quot;nav-link&quot;);$(this).find(&quot;.dropdown-menu&quot;).parent(&quot;li&quot;).addClass(&quot;dropdown&quot;);$(this).find(&quot;.dropdown-menu a&quot;).removeClass(&quot;nav-link&quot;).addClass(&quot;dropdown-item&quot;).unwrap();$(this).find(&quot;.dropdown ul&quot;).replaceWith(function(){return&quot;&lt;div class='dropdown-menu'&gt;&quot;+this.innerHTML+&quot;&lt;/div&gt;&quot;;});$(this).find(&quot;.dropdown .nav-link&quot;).addClass(&quot;dropdown-toggle&quot;).attr(&quot;aria-haspopup&quot;,&quot;true&quot;).attr(&quot;aria-expanded&quot;,&quot;false&quot;).attr(&quot;data-toggle&quot;,&quot;dropdown&quot;);$(this).find(&quot;.navbar-nav&quot;).unwrap();});$('.carousel-inner .carousel-item:first-child').addClass('active');});(function($){&quot;use strict&quot;;SearchFormInit();function SearchFormInit(){$(&quot;.search-trigger&quot;).on('click',function(){$(&quot;#search&quot;).addClass(&quot;active&quot;).find(&quot;.search&quot;).focus();});$(&quot;#search&quot;).on('click',function(){$(this).find(&quot;.search&quot;).focus();});$(&quot;#close&quot;).on('click',function(){$(&quot;#search&quot;).removeClass(&quot;active&quot;);});}
  $().UItoTop({easingType:'easeOutQuart'});$('.lazyloaded').lazy();})(jQuery);if($('.archive-view .queryMessage .card, .label-view .queryMessage .card').hasClass('fbt-query-error-mode')){$('#blog-pager').addClass('d-none');};function openNav(){var el=document.getElementById(&quot;sidebar-wrapper&quot;),$contentOverlay=document.getElementById(&quot;fbt-content-overlay&quot;),bodyClass=document.querySelector('body');el.classList.add(&quot;openSidebar&quot;);$contentOverlay.classList.add(&quot;activeOverlay&quot;);el.classList.remove(&quot;closeSidebar&quot;);bodyClass.classList.add(&quot;sidebar-visible&quot;);};function closeNav(){var el=document.getElementById(&quot;sidebar-wrapper&quot;),$contentOverlay=document.getElementById(&quot;fbt-content-overlay&quot;),bodyClass=document.querySelector('body');el.classList.remove(&quot;openSidebar&quot;);$contentOverlay.classList.remove(&quot;activeOverlay&quot;);bodyClass.classList.remove(&quot;sidebar-visible&quot;);};var ppCarousel=$(&quot;.carousel&quot;);ppCarousel.append(&quot;&lt;ol class='carousel-indicators'&gt;&lt;/ol&gt;&quot;);var indicators=$(&quot;.carousel-indicators&quot;);ppCarousel.find(&quot;.carousel-inner&quot;).children(&quot;.carousel-item&quot;).each(function(index){(index===0)?indicators.append(&quot;&lt;li data-target='#carouselPopularPosts' data-slide-to='&quot;+index+&quot;' class='active'&gt;&lt;/li&gt;&quot;):indicators.append(&quot;&lt;li data-target='#carouselPopularPosts' data-slide-to='&quot;+index+&quot;'&gt;&lt;/li&gt;&quot;);});$('.fbt-sidenav').each(function(){var searchWidth=$('.sidebar-wrapper').width();if(searchWidth&gt;0){$('.fbt-sidenav').addClass('active');}else{$('.fbt-sidenav').removeClass('active');}});$(function($){&quot;use strict&quot;;var c_form=&quot;[contact_Form]&quot;;var hide_text=&quot;[hide_Text]&quot;;var full_page=&quot;[full_Page]&quot;;var primary_button=&quot;[button_primary]&quot;;var secondary_button=&quot;[button_secondary]&quot;;var success_button=&quot;[button_success]&quot;;var danger_button=&quot;[button_danger]&quot;;var warning_button=&quot;[button_warning]&quot;;var info_button=&quot;[button_info]&quot;;var dark_button=&quot;[button_dark]&quot;;var grid_five=&quot;[full_Screen]&quot;;var grid_four=&quot;[four_Columns]&quot;;var hide_author=&quot;[hide_Author]&quot;;var hide_date=&quot;[hide_Date]&quot;;var hide_post_meta=&quot;[hide_PostMeta]&quot;;$(&quot;.post-body *&quot;).replaceText(primary_button,&quot;&lt;span class='post-button-primary d-none'&gt;&lt;/span&gt;&quot;);$(&quot;.post-body *&quot;).replaceText(secondary_button,&quot;&lt;span class='post-button-secondary d-none'&gt;&lt;/span&gt;&quot;);$(&quot;.post-body *&quot;).replaceText(success_button,&quot;&lt;span class='post-button-success d-none'&gt;&lt;/span&gt;&quot;);$(&quot;.post-body *&quot;).replaceText(danger_button,&quot;&lt;span class='post-button-danger d-none'&gt;&lt;/span&gt;&quot;);$(&quot;.post-body *&quot;).replaceText(warning_button,&quot;&lt;span class='post-button-warning d-none'&gt;&lt;/span&gt;&quot;);$(&quot;.post-body *&quot;).replaceText(info_button,&quot;&lt;span class='post-button-info d-none'&gt;&lt;/span&gt;&quot;);$(&quot;.post-body *&quot;).replaceText(dark_button,&quot;&lt;span class='post-button-dark d-none'&gt;&lt;/span&gt;&quot;);$(&quot;.post-button-primary&quot;).parent().wrapInner('&lt;button class=&quot;btn btn-primary&quot; type=&quot;button&quot;&gt;&lt;/button&gt;');$(&quot;.post-button-secondary&quot;).parent().wrapInner('&lt;button class=&quot;btn btn-secondary&quot; type=&quot;button&quot;&gt;&lt;/button&gt;');$(&quot;.post-button-success&quot;).parent().wrapInner('&lt;button class=&quot;btn btn-success&quot; type=&quot;button&quot;&gt;&lt;/button&gt;');$(&quot;.post-button-danger&quot;).parent().wrapInner('&lt;button class=&quot;btn btn-danger&quot; type=&quot;button&quot;&gt;&lt;/button&gt;');$(&quot;.post-button-warning&quot;).parent().wrapInner('&lt;button class=&quot;btn btn-warning&quot; type=&quot;button&quot;&gt;&lt;/button&gt;');$(&quot;.post-button-info&quot;).parent().wrapInner('&lt;button class=&quot;btn btn-info&quot; type=&quot;button&quot;&gt;&lt;/button&gt;');$(&quot;.post-button-dark&quot;).parent().wrapInner('&lt;button class=&quot;btn btn-dark&quot; type=&quot;button&quot;&gt;&lt;/button&gt;');$(&quot;.fbt-item-post *&quot;).replaceText(full_page,&quot;&lt;style&gt;.blog-posts .col-xl-8.col-lg-9 {-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;}.fbt-page-shape-title {text-align: center;}&lt;/style&gt;&quot;);$(&quot;.fbt-item-post *&quot;).replaceText(c_form,&quot;&lt;div class='page-contact'/&gt;&lt;style&gt;#page_widgets .ContactForm,.sidebar .ContactForm,.ContactForm .fbt-sep-title {display: none!important;}&lt;/style&gt;&quot;);$(&quot;#Short_Code_Options .html-widget-content&quot;).replaceText(grid_five,&quot;&lt;style&gt;.feed-view .fbt-elastic-container {max-width: 100%;}@media (min-width: 1200px) {.card-columns {-webkit-column-count: 5;-moz-column-count: 5;column-count: 5;}}.navbar {padding-left: 0;padding-right: 0;}@media (min-width: 768px) {.navbar {padding-left: 1.9rem;padding-right: 1.9rem;}}.navbar .container {max-width: 100%;}@media (max-width: 575.98px) {.navbar {padding-left: 1rem;padding-right: 1rem;}}.blog-post:nth-child(2n+2) .card-body .post-excerpt {display: none;}@media (max-width: 1601.98px) {.fbt-index-post .post-title.h4 {font-size: 1rem;line-height: calc(1rem + 4px);}}@media (min-width: 768px) {.feed-view .fbt-elastic-container {padding: 0 3rem;}}&lt;/style&gt;&quot;);$(&quot;#Short_Code_Options .html-widget-content&quot;).replaceText(hide_author,&quot;&lt;style&gt;#carouselPopularPosts .post-meta .post-author, .FeaturedPost .post-meta .post-author {display: none;}&lt;/style&gt;&quot;);$(&quot;#Short_Code_Options .html-widget-content&quot;).replaceText(hide_date,&quot;&lt;style&gt;#carouselPopularPosts .post-meta .post-date, .FeaturedPost .post-meta .post-date, .post-meta span:not(:last-child):after {display: none;}&lt;/style&gt;&quot;);$(&quot;#Short_Code_Options .html-widget-content&quot;).replaceText(hide_post_meta,&quot;&lt;style&gt;#carouselPopularPosts .post-meta, .FeaturedPost .post-meta {display: none;}.fbt_read_more {margin-top: 2.5rem!important;}&lt;/style&gt;&quot;);$(&quot;#Short_Code_Options .html-widget-content&quot;).replaceText(grid_four,&quot;&lt;style&gt;@media (min-width: 1200px) {.card-columns {-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;}}.fbt-index-post .post-title.h4 {font-size: 1rem;line-height: calc(1rem + 4px);}.blog-post:nth-child(2n+2) .card-body .post-excerpt {display: none;}&lt;/style&gt;&quot;);$(&quot;.fbt-item-post *&quot;).replaceText(hide_text,&quot;&lt;div class='hidden-text d-none'&gt;&lt;/div&gt;&quot;);$('strike').appendTo('.hidden-text');$('#page_widgets .ContactForm').appendTo('.page-contact');$(&quot;.fbt-big-title-text&quot;).each(function(){var n=&quot;[&quot;;var r=&quot;]&quot;;$(&quot;.fbt-big-title-text *&quot;).replaceText(n,'&lt;span class=&quot;title-sec-text&quot;&gt;');$(&quot;.fbt-big-title-text *&quot;).replaceText(r,&quot;&lt;/span&gt;&quot;);});$(&quot;.post-body&quot;).each(function(){$(this).find('blockquote').addClass('fbt-shape-container').wrapInner('&lt;div class=&quot;card shadow-lg radius-10 px-5 pt-5 pb-4&quot;&gt;&lt;p class=&quot;pl-5&quot;/&gt;&lt;/div&gt;');});$('.Blog, .navbar-brand, .header-buttons').show();$('.cookie-choices-button').addClass('btn btn-warning btn-sm text-dark py-1 px-4 radius-25 font-weight-light');});if(document.documentMode||/Edge/.test(navigator.userAgent)){jQuery('.fbt-post-thumbnail a img, .PopularPosts a img').addClass('d-none').each(function(){var t=jQuery(this),s='url('+t.attr('data-src')+')',p=t.parent(),d=jQuery('&lt;div class=&quot;fbt-resize&quot;&gt;&lt;/div&gt;');p.append(d);d.css({'background-image':s});t.hide();});}
  //]]&gt;
  &lt;/script&gt;
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre><code>.fbt_sticky_nav.nav_offset {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .fbt_sticky_nav.sticky__nav {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
  }
  .fbt_sticky_nav.sticky__nav.scrolling_nav {
    opacity: 1;
    visibility: visible;
  }
  .fbt_sticky_nav.scrolling_nav {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  @media (min-width: 1200px) {
    .fbt_sticky_nav.scrolling_nav .nav-item .nav-link {
      padding-top: 1.25rem;
      padding-bottom: 1.2rem;
    }
  }
  .dark-skin {
      background-color: $(header.bg.color);
      -webkit-box-shadow: 0 0 $(shadow.width) rgba(103,151,255,.25);
      box-shadow: 0 0 $(shadow.width) rgba(103,151,255,.25);
  }
  </code></pre>
  <p><strong>HTML (If necessary):</strong></p>
  <pre><code>  &lt;nav class='navbar navbar-expand-xl navbar-dark dark-skin fbt_sticky_nav'&gt;
      &lt;div class='container nav-mobile-px clearfix'&gt;
        &lt;b:section class='navbar-brand order-2 order-xl-1 m-auto' id='header-logo' maxwidgets='1' name='Logo' showaddelement='yes'&gt;
          &lt;b:widget id='Header1' locked='true' title='Wave4Tech - الموجة للتقنية (Header)' type='Header' version='2' visible='true'&gt;
            &lt;b:widget-settings&gt;
              &lt;b:widget-setting name='displayUrl'&gt;http://2.bp.blogspot.com/-dN1zT-u4E-g/YL02ix5vWFI/AAAAAAAAI4o/U32cwNmYTbg7mscXxZUN3qVdA1k175XsQCK4BGAYYCw/s305/Logo%2B2%2BEn.png&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='displayHeight'&gt;56&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='sectionWidth'&gt;305&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='useImage'&gt;true&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='shrinkToFit'&gt;true&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='imagePlacement'&gt;REPLACE&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='displayWidth'&gt;300&lt;/b:widget-setting&gt;
            &lt;/b:widget-settings&gt;
            &lt;b:includable id='main' var='this'&gt;
              &lt;div class='header-widget'&gt;
                &lt;b:include cond='data:imagePlacement in {&amp;quot;REPLACE&amp;quot;, &amp;quot;BEFORE_DESCRIPTION&amp;quot;}' name='image'/&gt;
                &lt;b:include cond='data:imagePlacement == &amp;quot;BEHIND&amp;quot;' name='title'/&gt;
              &lt;/div&gt;
            &lt;/b:includable&gt;
            &lt;b:includable id='behindImageStyle'&gt;
              &lt;b:if cond='data:sourceUrl'&gt;
                &lt;b:include cond='data:this.image' data='{                    image: data:this.image,                    selector: &amp;quot;.header-widget&amp;quot;                  }' name='responsiveImageStyle'/&gt;
                &lt;style type='text/css'&gt;
                  .header-widget {
                    background-position: &lt;data:blog.locale.languageAlignment/&gt;;
                    background-repeat: no-repeat;
                  }
                &lt;/style&gt;
              &lt;/b:if&gt;
            &lt;/b:includable&gt;
            &lt;b:includable id='description'&gt;
              &lt;p&gt;
                &lt;data:this.description/&gt;
              &lt;/p&gt;
            &lt;/b:includable&gt;
            &lt;b:includable id='image'&gt;
              &lt;a class='header-image-wrapper' expr:href='data:blog.homepageUrl'&gt;
                &lt;img expr:alt='data:blog.title.escaped' expr:data-height='data:height' expr:data-width='data:width' expr:src='data:image resizeImage 240'/&gt;
              &lt;/a&gt;
            &lt;/b:includable&gt;
            &lt;b:includable id='title'&gt;
              &lt;h1&gt;
                &lt;b:tag expr:href='data:blog.homepageUrl' name='a'&gt;
                  &lt;data:title/&gt;
                &lt;/b:tag&gt;
              &lt;/h1&gt;
            &lt;/b:includable&gt;
          &lt;/b:widget&gt;
        &lt;/b:section&gt;
        &lt;button aria-controls='navbar' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler order-1 order-xl-2' data-target='#navbar' data-toggle='collapse' type='button'&gt;&amp;#9776;&lt;/button&gt;
        &lt;div class='header-buttons order-3 order-lg-4'&gt;
          &lt;span class='fa fa-search navbar-search search-trigger'/&gt;
          &lt;span class='fbt-sidenav ml-1' onclick='openNav()'&gt;&amp;#9776;&lt;/span&gt;
        &lt;/div&gt;
        &lt;b:section class='collapse navbar-collapse order-4 order-xl-3 clearfix' id='navbar' maxwidgets='1' name='Main Menu' showaddelement='yes'&gt;
          &lt;b:widget id='LinkList1' locked='true' title='Main Menu' type='LinkList' version='2' visible='true'&gt;
            &lt;b:widget-settings&gt;
              &lt;b:widget-setting name='link-7'&gt;https://wave4technology.blogspot.com/search/label/Windows?max-results=16&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='link-5'&gt;https://wave4technology.blogspot.com/search/label/PC%20Softwares?max-results=16&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='link-6'&gt;https://wave4technology.blogspot.com/search/label/Android%20Apps?max-results=16&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='link-3'&gt;https://wave4technology.blogspot.com/search/label/Android%20Games?max-results=16&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='link-4'&gt;#&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='text-1'&gt;{ Games }&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='text-0'&gt;{ Homepage }&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='text-3'&gt;_Android Games&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='text-2'&gt;_PC Games&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='text-5'&gt;_PC Softwares&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='text-4'&gt;{ Softwares }&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='text-7'&gt;{ Windows }&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='text-6'&gt;_Android Apps&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='sorting'&gt;NONE&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='link-1'&gt;#&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='link-2'&gt;https://wave4technology.blogspot.com/search/label/PC%20Games?max-results=16&lt;/b:widget-setting&gt;
              &lt;b:widget-setting name='link-0'&gt;/&lt;/b:widget-setting&gt;
            &lt;/b:widget-settings&gt;
            &lt;b:includable id='main'&gt;
              &lt;b:include name='content'/&gt;
            &lt;/b:includable&gt;
            &lt;b:includable id='content'&gt;
              &lt;div class='widget-content'&gt;
                &lt;ul&gt;
                  &lt;b:loop values='data:links' var='link'&gt;
                    &lt;li&gt;&lt;a expr:href='data:link.target'&gt;&lt;data:link.name/&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/b:loop&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/b:includable&gt;
          &lt;/b:widget&gt;
        &lt;/b:section&gt;
        &lt;script&gt; 
  </code></pre>
  <p>what can i do to prevent this bug from appearing ?
  i want a stable scrolling man.. i also tried to change the position to relative and to stick but none of them solved my issue.</p>
  <p><strong>(SORRY FOR MY BAD EXPLANATION &amp; BAD ENGLISH)</strong></p>