Sticky Header - 滚动页面时会跳动

Question

我正在使用 blogspot.com 系统创建我自己的博客。问题是粘性导航栏在滚动时导致页面出现小跳动！如果您想清楚地了解，这是网站：https://www.wave4tech.net/ 还有为什么粘性导航没有出现在我网站的移动版本中？这些是我的代码：

JQuery:

<script>
//<![CDATA[
$(function(){"use strict";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()>=width;}}
$(window).scroll(function(){var scroll=$(window).scrollTop();if(scroll>300&minimumWidth(1200)){$(".fbt_sticky_nav").addClass("sticky__nav");}else{$(".fbt_sticky_nav").removeClass("sticky__nav");}
if(scroll>400&minimumWidth(1200)){$(".fbt_sticky_nav").addClass("nav_offset");}else{$(".fbt_sticky_nav").removeClass("nav_offset");}
if(scroll>500&minimumWidth(1200)){$(".fbt_sticky_nav").addClass("scrolling_nav");}else{$(".fbt_sticky_nav").removeClass("scrolling_nav");}});$('.post-body').each(function(){$(this).find('iframe[src*="youtube.com"]').removeAttr('width').removeAttr('height').removeAttr('data-thumbnail-src').removeAttr('frameborder').removeClass('YOUTUBE-iframe-video');$(this).find('iframe[src*="youtube.com"], iframe[src*="player.vimeo.com"], iframe[src*="facebook.com/plugins/video"]').addClass('embed-responsive-item').wrap('<div class="embed-responsive embed-responsive-16by9"></div>');});$('.item-view .post-body img').first().each(function(){$(this).parent().parent().remove();});$("#navbar.navbar-collapse").each(function(){$(this).find('#LinkList1 ul li').css('cssText','display: block');$(this).find(".navbar-nav li").addClass("nav-item");$(this).find(".navbar-nav li a").addClass("nav-link");$(this).find(".dropdown-menu").parent("li").addClass("dropdown");$(this).find(".dropdown-menu a").removeClass("nav-link").addClass("dropdown-item").unwrap();$(this).find(".dropdown ul").replaceWith(function(){return"<div class='dropdown-menu'>"+this.innerHTML+"</div>";});$(this).find(".dropdown .nav-link").addClass("dropdown-toggle").attr("aria-haspopup","true").attr("aria-expanded","false").attr("data-toggle","dropdown");$(this).find(".navbar-nav").unwrap();});$('.carousel-inner .carousel-item:first-child').addClass('active');});(function($){"use strict";SearchFormInit();function SearchFormInit(){$(".search-trigger").on('click',function(){$("#search").addClass("active").find(".search").focus();});$("#search").on('click',function(){$(this).find(".search").focus();});$("#close").on('click',function(){$("#search").removeClass("active");});}
$().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("sidebar-wrapper"),$contentOverlay=document.getElementById("fbt-content-overlay"),bodyClass=document.querySelector('body');el.classList.add("openSidebar");$contentOverlay.classList.add("activeOverlay");el.classList.remove("closeSidebar");bodyClass.classList.add("sidebar-visible");};function closeNav(){var el=document.getElementById("sidebar-wrapper"),$contentOverlay=document.getElementById("fbt-content-overlay"),bodyClass=document.querySelector('body');el.classList.remove("openSidebar");$contentOverlay.classList.remove("activeOverlay");bodyClass.classList.remove("sidebar-visible");};var ppCarousel=$(".carousel");ppCarousel.append("<ol class='carousel-indicators'></ol>");var indicators=$(".carousel-indicators");ppCarousel.find(".carousel-inner").children(".carousel-item").each(function(index){(index===0)?indicators.append("<li data-target='#carouselPopularPosts' data-slide-to='"+index+"' class='active'></li>"):indicators.append("<li data-target='#carouselPopularPosts' data-slide-to='"+index+"'></li>");});$('.fbt-sidenav').each(function(){var searchWidth=$('.sidebar-wrapper').width();if(searchWidth>0){$('.fbt-sidenav').addClass('active');}else{$('.fbt-sidenav').removeClass('active');}});$(function($){"use strict";var c_form="[contact_Form]";var hide_text="[hide_Text]";var full_page="[full_Page]";var primary_button="[button_primary]";var secondary_button="[button_secondary]";var success_button="[button_success]";var danger_button="[button_danger]";var warning_button="[button_warning]";var info_button="[button_info]";var dark_button="[button_dark]";var grid_five="[full_Screen]";var grid_four="[four_Columns]";var hide_author="[hide_Author]";var hide_date="[hide_Date]";var hide_post_meta="[hide_PostMeta]";$(".post-body *").replaceText(primary_button,"<span class='post-button-primary d-none'></span>");$(".post-body *").replaceText(secondary_button,"<span class='post-button-secondary d-none'></span>");$(".post-body *").replaceText(success_button,"<span class='post-button-success d-none'></span>");$(".post-body *").replaceText(danger_button,"<span class='post-button-danger d-none'></span>");$(".post-body *").replaceText(warning_button,"<span class='post-button-warning d-none'></span>");$(".post-body *").replaceText(info_button,"<span class='post-button-info d-none'></span>");$(".post-body *").replaceText(dark_button,"<span class='post-button-dark d-none'></span>");$(".post-button-primary").parent().wrapInner('<button class="btn btn-primary" type="button"></button>');$(".post-button-secondary").parent().wrapInner('<button class="btn btn-secondary" type="button"></button>');$(".post-button-success").parent().wrapInner('<button class="btn btn-success" type="button"></button>');$(".post-button-danger").parent().wrapInner('<button class="btn btn-danger" type="button"></button>');$(".post-button-warning").parent().wrapInner('<button class="btn btn-warning" type="button"></button>');$(".post-button-info").parent().wrapInner('<button class="btn btn-info" type="button"></button>');$(".post-button-dark").parent().wrapInner('<button class="btn btn-dark" type="button"></button>');$(".fbt-item-post *").replaceText(full_page,"<style>.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;}</style>");$(".fbt-item-post *").replaceText(c_form,"<div class='page-contact'/><style>#page_widgets .ContactForm,.sidebar .ContactForm,.ContactForm .fbt-sep-title {display: none!important;}</style>");$("#Short_Code_Options .html-widget-content").replaceText(grid_five,"<style>.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;}}</style>");$("#Short_Code_Options .html-widget-content").replaceText(hide_author,"<style>#carouselPopularPosts .post-meta .post-author, .FeaturedPost .post-meta .post-author {display: none;}</style>");$("#Short_Code_Options .html-widget-content").replaceText(hide_date,"<style>#carouselPopularPosts .post-meta .post-date, .FeaturedPost .post-meta .post-date, .post-meta span:not(:last-child):after {display: none;}</style>");$("#Short_Code_Options .html-widget-content").replaceText(hide_post_meta,"<style>#carouselPopularPosts .post-meta, .FeaturedPost .post-meta {display: none;}.fbt_read_more {margin-top: 2.5rem!important;}</style>");$("#Short_Code_Options .html-widget-content").replaceText(grid_four,"<style>@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;}</style>");$(".fbt-item-post *").replaceText(hide_text,"<div class='hidden-text d-none'></div>");$('strike').appendTo('.hidden-text');$('#page_widgets .ContactForm').appendTo('.page-contact');$(".fbt-big-title-text").each(function(){var n="[";var r="]";$(".fbt-big-title-text *").replaceText(n,'<span class="title-sec-text">');$(".fbt-big-title-text *").replaceText(r,"</span>");});$(".post-body").each(function(){$(this).find('blockquote').addClass('fbt-shape-container').wrapInner('<div class="card shadow-lg radius-10 px-5 pt-5 pb-4"><p class="pl-5"/></div>');});$('.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('<div class="fbt-resize"></div>');p.append(d);d.css({'background-image':s});t.hide();});}
//]]>
</script>

CSS:

.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);
}

HTML（如有必要）：

  <nav class='navbar navbar-expand-xl navbar-dark dark-skin fbt_sticky_nav'>
    <div class='container nav-mobile-px clearfix'>
      <b:section class='navbar-brand order-2 order-xl-1 m-auto' id='header-logo' maxwidgets='1' name='Logo' showaddelement='yes'>
        <b:widget id='Header1' locked='true' title='Wave4Tech - الموجة للتقنية (Header)' type='Header' version='2' visible='true'>
          <b:widget-settings>
            <b:widget-setting name='displayUrl'>http://2.bp.blogspot.com/-dN1zT-u4E-g/YL02ix5vWFI/AAAAAAAAI4o/U32cwNmYTbg7mscXxZUN3qVdA1k175XsQCK4BGAYYCw/s305/Logo%2B2%2BEn.png</b:widget-setting>
            <b:widget-setting name='displayHeight'>56</b:widget-setting>
            <b:widget-setting name='sectionWidth'>305</b:widget-setting>
            <b:widget-setting name='useImage'>true</b:widget-setting>
            <b:widget-setting name='shrinkToFit'>true</b:widget-setting>
            <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
            <b:widget-setting name='displayWidth'>300</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main' var='this'>
            <div class='header-widget'>
              <b:include cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='image'/>
              <b:include cond='data:imagePlacement == &quot;BEHIND&quot;' name='title'/>
            </div>
          </b:includable>
          <b:includable id='behindImageStyle'>
            <b:if cond='data:sourceUrl'>
              <b:include cond='data:this.image' data='{                    image: data:this.image,                    selector: &quot;.header-widget&quot;                  }' name='responsiveImageStyle'/>
              <style type='text/css'>
                .header-widget {
                  background-position: <data:blog.locale.languageAlignment/>;
                  background-repeat: no-repeat;
                }
              </style>
            </b:if>
          </b:includable>
          <b:includable id='description'>
            <p>
              <data:this.description/>
            </p>
          </b:includable>
          <b:includable id='image'>
            <a class='header-image-wrapper' expr:href='data:blog.homepageUrl'>
              <img expr:alt='data:blog.title.escaped' expr:data-height='data:height' expr:data-width='data:width' expr:src='data:image resizeImage 240'/>
            </a>
          </b:includable>
          <b:includable id='title'>
            <h1>
              <b:tag expr:href='data:blog.homepageUrl' name='a'>
                <data:title/>
              </b:tag>
            </h1>
          </b:includable>
        </b:widget>
      </b:section>
      <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'>&#9776;</button>
      <div class='header-buttons order-3 order-lg-4'>
        <span class='fa fa-search navbar-search search-trigger'/>
        <span class='fbt-sidenav ml-1' onclick='openNav()'>&#9776;</span>
      </div>
      <b:section class='collapse navbar-collapse order-4 order-xl-3 clearfix' id='navbar' maxwidgets='1' name='Main Menu' showaddelement='yes'>
        <b:widget id='LinkList1' locked='true' title='Main Menu' type='LinkList' version='2' visible='true'>
          <b:widget-settings>
            <b:widget-setting name='link-7'>https://wave4technology.blogspot.com/search/label/Windows?max-results=16</b:widget-setting>
            <b:widget-setting name='link-5'>https://wave4technology.blogspot.com/search/label/PC%20Softwares?max-results=16</b:widget-setting>
            <b:widget-setting name='link-6'>https://wave4technology.blogspot.com/search/label/Android%20Apps?max-results=16</b:widget-setting>
            <b:widget-setting name='link-3'>https://wave4technology.blogspot.com/search/label/Android%20Games?max-results=16</b:widget-setting>
            <b:widget-setting name='link-4'>#</b:widget-setting>
            <b:widget-setting name='text-1'>{ Games }</b:widget-setting>
            <b:widget-setting name='text-0'>{ Homepage }</b:widget-setting>
            <b:widget-setting name='text-3'>_Android Games</b:widget-setting>
            <b:widget-setting name='text-2'>_PC Games</b:widget-setting>
            <b:widget-setting name='text-5'>_PC Softwares</b:widget-setting>
            <b:widget-setting name='text-4'>{ Softwares }</b:widget-setting>
            <b:widget-setting name='text-7'>{ Windows }</b:widget-setting>
            <b:widget-setting name='text-6'>_Android Apps</b:widget-setting>
            <b:widget-setting name='sorting'>NONE</b:widget-setting>
            <b:widget-setting name='link-1'>#</b:widget-setting>
            <b:widget-setting name='link-2'>https://wave4technology.blogspot.com/search/label/PC%20Games?max-results=16</b:widget-setting>
            <b:widget-setting name='link-0'>/</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
            <b:include name='content'/>
          </b:includable>
          <b:includable id='content'>
            <div class='widget-content'>
              <ul>
                <b:loop values='data:links' var='link'>
                  <li><a expr:href='data:link.target'><data:link.name/></a></li>
                </b:loop>
              </ul>
            </div>
          </b:includable>
        </b:widget>
      </b:section>
      <script>

我能做些什么来防止这个错误出现？我想要一个稳定的滚动人..我也尝试将位置更改为相对位置并坚持但 none 解决了我的问题。

（抱歉我的错误解释和糟糕的英语）

Answer 1

滚动时突然跳转的问题在您的 css 中。具体这部分。

.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.sticky__nav 尝试将不透明度设置为 1，将可见性设置为 visible 并上下滚动页面。

opacity: 1;
visibility: visible;

当您这样做时，您会看到当您从页面顶部开始滚动时，导航栏是隐藏的。然后，当您稍微向下移动时，导航栏会突然出现在您的视野中。然后，当您继续滚动时，导航栏会向上滑出视图。然后，当您再滚动一点时，导航栏会再次滑回视图中。

关于属性 visibility 和 opacity 的事情是它们实际上并没有从 dom 中删除元素。它只是隐藏在视线之外。所以在你的情况下，你有这个固定位置的元素突然出现在视野中但仍然看不见。

如果您想从 dom 中完全删除某些内容，请使用 display: none。当你想再次显示时，使用 display: block

.fbt_sticky_nav.sticky__nav {
  position: fixed;
  display: none;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}
.fbt_sticky_nav.sticky__nav.scrolling_nav {
  opacity: 1;
  display: block;
}

请注意，这确实会破坏滚动时向下滑动的小动画。导航突然出现，没有任何过渡。但它阻止了滚动时发生的突然跳跃。

手头有一个更大的问题，需要您进行更多调查。应用上面的修复实际上只能治疗问题的症状。它不能治愈它。

我真的没有足够的带宽来深入研究这个问题，但是，我会看一下 jQuery 代码并仔细检查你的逻辑。

Sticky Header - 滚动页面时会跳动

Sticky Header - buggy jumping when scrolling the page

html

blogger