当“粘”到顶部时，导航栏会在滚动条上弹跳

Question

出于某种原因，每当我滚动导航栏并将其作为固定元素“固定”在屏幕上时，它就会产生弹跳/跳跃效果。我自然不想要这个！

这是网站：https://julia.higson.ca/

我尝试了改变 nav 和 nav-wrap 元素高度的方法，但没有效果。任何帮助将不胜感激。

下面的代码：

jQuery(function($) {

  // Check your elements
  $.fn.checkNavPositioning = function($el, $nav, scrollClass) {
    var navHeight = $nav.outerHeight();

    if(((this.outerHeight() - $(window).scrollTop()) < $nav.outerHeight()) && !$el.hasClass(scrollClass)) {
      $el.addClass(scrollClass);
      $el.css('padding-top', navHeight);
    } else if((this.outerHeight() >= $(window).scrollTop()) && $el.hasClass(scrollClass)) {
      $el.removeClass(scrollClass);
      $el.css('padding-top', 0);
    }
  }

  // Mobile sidebars
  $.fn.expandableSidebar = function(expandedClass) {
    var $me = this;

    $me.on('click', function() {
      if(!$me.hasClass(expandedClass)) {
        $me.addClass(expandedClass);
        $me.hide();
        $me.removeClass("active");
      } else {
        $me.removeClass(expandedClass);
        $me.hide();
        $me.removeClass("active");
      }
    });
  }

  // Interval loop
  $.fn.intervalLoop = function(condition, action, duration, limit) {
    var counter = 0;
    var looper = setInterval(function(){
      if (counter >= limit || $.fn.checkIfElementExists(condition)) {
        clearInterval(looper);
      } else {
        action();
        counter++;
      }
    }, duration);
  }

  // Check if element exists
  $.fn.checkIfElementExists = function(selector) {
    return $(selector).length;
  }


  var centoController = {
    init: function(opts) {
      var base = this;

      // Check content positioning
      if($(window).width() > 767) {
        $('.cento-header').checkNavPositioning($('body:not(.wsite-checkout-page)'), $('.nav-wrap'), 'affix');
      }

      // Add classes to elements
      base._addClasses();
        base._attachEvents();

        setTimeout(function() {
            $.fn.intervalLoop('', base._checkCartItems, 800, 3);
        }, 500);
    },

    _addClasses: function() {
      var base = this;

      // Add class to nav items with subnav
      $('.wsite-menu-default').find('li.wsite-menu-item-wrap').each(function(){
        var $me = $(this);

        if($me.children('.wsite-menu-wrap').length > 0) {

          $me.addClass('has-submenu');
          $('<span class="icon-caret"></span>').insertAfter($me.children('a.wsite-menu-item'));
        }
      });

      // Add class to subnav items with subnav
      $('.wsite-menu').find('li.wsite-menu-subitem-wrap').each(function(){
        var $me = $(this);

        if($me.children('.wsite-menu-wrap').length > 0) {

          $me.addClass('has-submenu');
          $('<span class="icon-caret"></span>').insertAfter($me.children('a.wsite-menu-subitem'));
        }
      });

      // Keep subnav open if submenu item is active
    $('li.wsite-menu-subitem-wrap.wsite-nav-current').parents('.wsite-menu-wrap').addClass('open');

      // Add placeholder text to inputs
      $('.wsite-form-sublabel').each(function(){
        var sublabel = $(this).text();
        $(this).prev('.wsite-form-input').attr('placeholder', sublabel);
      });

      // Add fullwidth class to gallery thumbs if less than 6
      $('.imageGallery').each(function(){
        if ($(this).children('div').length <= 6) {
          $(this).children('div').addClass('fullwidth-mobile');
        }
      });
    },

    _checkCartItems: function() {
      var base = this;

      if($('#wsite-mini-cart').find('li.wsite-product-item').length > 0) {
        $('body').addClass('cart-full');
      } else {
        $('body').removeClass('cart-full');
      }
    },

    _moveLogin: function() {
      var loginDetach = $('#member-login').detach();
      $('.mobile-nav .wsite-menu-default > li:last-child').after(loginDetach);
    },

    _attachEvents: function() {
      var base = this;

        // Nav toggle
        $('.hamburger').on('click', function(e) {
          e.preventDefault();
            if(!$('body').hasClass('nav-open')) {
                $('body').addClass('nav-open');
            } else {
                $('body').toggleClass('nav-open');
                $('body').removeClass('nav-open');
            }
        });
        
        // Nav toggle AFTER CLICKING ON ANCHOR LINK 
        $('.nav li a').on('click', function(e){
            $('body').removeClass('nav-open');
        });

      // Move cart + login
      if ($(window).width() <= 992) {
        $.fn.intervalLoop('.mobile-nav #member-login', base._moveLogin, 800, 5);
      }

      // Window scroll
      $(window).on('scroll', function(){
        // Affix nav
        if($(window).width() > 767) {
          $('.cento-header').checkNavPositioning($('body:not(.wsite-checkout-page)'), $('.nav-wrap'), 'affix');
        }
      });

        // Subnav toggle
        $('li.has-submenu span.icon-caret').on('click', function() {
            var $me = $(this);

            if($me.siblings('.wsite-menu-wrap').hasClass('open')) {
                $me.siblings('.wsite-menu-wrap').removeClass('open');
            } else {
                $me.siblings('.wsite-menu-wrap').addClass('open');
            }
        });


      // Store category dropdown
      $('.wsite-com-sidebar').expandableSidebar('sidebar-expanded');

      // Search filters dropdown
      $('#wsite-search-sidebar').expandableSidebar('sidebar-expanded');

      // Init fancybox swipe on mobile
      if ('ontouchstart' in window) {
        $('body').on('click', 'a.w-fancybox', function() {
          base._initSwipeGallery();
        });
      }

      $('.wsite-product-button, #wsite-com-product-add-to-cart, .wsite-product-item .wsite-remove-button').on('click', function(){
          setTimeout(function() { base._checkCartItems(); }, 800);
        });
    },

    _initSwipeGallery: function() {
      var base = this;

      setTimeout(function(){
        var touchGallery = document.getElementsByClassName('fancybox-wrap')[0];
        var mc = new Hammer(touchGallery);
        mc.on("panleft panright", function(ev) {
          if (ev.type == "panleft") {
            $("a.fancybox-next").trigger("click");
          } else if (ev.type == "panright") {
            $("a.fancybox-prev").trigger("click");
          }
          base._initSwipeGallery();
        });
      }, 500);
    }
  }
  
    //**** ScrollSpy ****//
    // Cache selectors
    var lastId,
        topMenu = $("#top-menu"),
        topMenuHeight = topMenu.outerHeight()+15,
        // All list items
        menuItems = topMenu.find("a"),
        // Anchors corresponding to menu items
        scrollItems = menuItems.map(function(){
          var item = $($(this).attr("href"));
          if (item.length) { return item; }
        });

    // Bind click handler to menu items
    // so we can get a fancy scroll animation
    menuItems.click(function(e){
      var href = $(this).attr("href"),
          offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
      $('html, body').stop().animate({ 
          scrollTop: offsetTop
      }, 300);
      e.preventDefault();
    });

    // Bind to scroll
    $(window).scroll(function(){
       // Get container scroll position
       var fromTop = $(this).scrollTop()+topMenuHeight;
   
       // Get id of current scroll item
       var cur = scrollItems.map(function(){
         if ($(this).offset().top < fromTop)
           return this;
       });
       // Get the id of the current element
       cur = cur[cur.length-1];
       var id = cur && cur.length ? cur[0].id : "";
   
       if (lastId !== id) {
           lastId = id;
           // Set/remove active class
           menuItems
             .parent().removeClass("active")
             .end().filter("[href='#"+id+"']").parent().addClass("active");
       }                   
    });
    

  $(document).ready(function(){
    centoController.init();
  });

});

@import url(//fonts.googleapis.com/css?family=Quattrocento:400,700);
@import url(//fonts.googleapis.com/css?family=Quattrocento+Sans:400,700,400italic,700italic);
/* Resets */
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
body,
html,
p,
blockquote,
fieldset,
input {
  margin: 0;
  padding: 0;
}
/* Global Styles */
html {
  height: 100%;
  scroll-behavior: smooth;
}
body {
  width: 100%;
  height: 100%;
  background: #ffffff;
  color: #3e3e3e;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: #b9b9b9;
  text-decoration: none;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
a:hover {
  background-color: #fa8a86;
}
a img,
a:hover img {
  border: none;
}
h2 {
  margin-bottom: 15px;
  color: #000000;
  font-family: 'Quattrocento', serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2em;
}
p,
div.paragraph {
  margin-bottom: 10px;
  line-height: 1.5em;
}
blockquote {
  font-style: italic;
  border-left: 4px solid #ddd;
  margin: 10px 0 10px 0;
  padding-left: 20px;
  line-height: 1.5;
  color: #888;
}
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: #777777;
}
input[type="text"],
input[type="email"],
textarea {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-shadow: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border: 1px solid #777777;
}
textarea {
  resize: none;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
}
.wsite-form-field,
.wsite-com-product-option-groups {
  input[type="radio"],
  input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 1px solid #444444 !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-shadow: none;
  }
  input[type="radio"] {
    border-radius: 8px;
  }
  input[type="checkbox"] {
    background-color: #ffffff;
    border-radius: 0;
  }
  input[type="radio"]:after {
    display: block;
    border-radius: 8px;
    box-sizing: border-box;
    content: "";
  }
  input[type="radio"]:checked:after {
    background: #444444;
    border: 2px solid #ffffff;
    width: 14px;
    height: 14px;
  }
  input[type="checkbox"]:after {
    position: relative;
    top: 1px;
    left: 4px;
    width: 3px;
    height: 6px;
    border: solid #444444;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  input[type="checkbox"]:checked:after {
    display: block;
    content: " ";
  }
}
.container {
  overflow: hidden;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
/* Fixed nav */
body.affix .cento-header .nav-wrap {
  position: fixed;
  top: 0;
  z-index: 15;
  border-bottom: 2px solid #f7f7f7;
  overflow-anchor: none;
  
  /* The image used */
  background-image: url("Cover.jpg");
  
  /* Center and scale the image nicely */
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Editor Overrides :: DO NOT REMOVE */
#icontent .container {
  overflow: visible;
}
/* Header */
.cento-header {
  /*height: 100%;*/
  height: 100vh;
  position: relative;
  z-index: 9;
  width: 100%;
  /*background: #ffffff;*/
  background: transparent;
  padding: 150px 0 100px;
  box-sizing: border-box;
  
  /* The image used */
  background-image: url("Cover.jpg");
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.cento-header .logo {
  margin-bottom: 320px;
}
.cento-header .logo img {
  display: block;
  max-width: 200px;
}
.cento-header .logo #wsite-title {
  display: block;
  max-width: 500px;
}
.cento-header .logo,
.cento-header .logo a {
  display: block;
  color: #000000;
  background-color: transparent;
  text-align: center;
  letter-spacing: .04em;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: normal;
}
.cento-header .nav-wrap {
  overflow: hidden;
  width: 100%;
  padding: 10px 0;
  /*background: #ffffff;*/
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cento-header .hamburger {
  display: none;
}
/* Nav */
.nav {
  text-align: center;
}
.nav ul {
  display: inline-block;
  vertical-align: top;
  list-style-type: none;
}
.nav ul li {
  position: relative;
  display: inline-block;
  padding: 0px 5px;
}
.nav ul li a {
  display: block;
  padding: 0px 100px;
  /*color: #b9b9b9;*/
  color: #000000;
  background-color: transparent;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 14px;
  /*font-weight: 400;*/
  font-weight: bold;
  line-height: 19px;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  transition: all 300ms linear;
  
  border-bottom: 4px solid transparent;
  transition: border-bottom-color 0.5s ease-out;
  -webkit-transition: border-bottom-color 0.5s ease-out;
}
#top-menu a:hover {
  /*text-decoration: underline;*/ 
  border-bottom-color: #fa8a86;
}
#top-menu li.active a {
  border-bottom-color: black;
}
.nav ul li#active > a.wsite-menu-item,
.nav ul li > a.wsite-menu-item:hover {
  color: #333333;
}
.mobile-nav {
  display: none;
}
/* Submenu */
#wsite-menus .wsite-menu {
  background: #ffffff;
  border: 1px solid #b9b9b9;
}
#wsite-menus .wsite-menu li a {
  background: #ffffff;
  color: #b9b9b9;
  border: none;
  border-bottom: 1px solid #b9b9b9;
  text-transform: uppercase;
  letter-spacing: .07em;
}
#wsite-menus .wsite-menu li:last-child a {
  border-bottom: none;
}
#wsite-menus .wsite-menu li a:hover {
  color: #333333;
}
#wsite-menus .wsite-menu li a:hover .wsite-menu-arrow:before {
  color: #333333;
}
#wsite-menus .wsite-menu-arrow {
  color: transparent;
  font-size: 0;
}
#wsite-menus .wsite-menu-arrow:before {
  display: block;
  color: #b9b9b9;
  content: '\203A';
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 24px;
  font-weight: normal;
  line-height: 11px;
}
/* Banner */

.wsite-background,
.wsite-header-section {
  position: relative;
  background: url(images/default-bg.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
}

.banner-wrap {
  position: relative;
  width: 100%;
  max-width: 1115px;
  margin: 20px auto 0;
}
.wsite-header-section:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  height: inherit;
  background: rgba(0, 0, 0, 0.2);
  content: ' ';
}
.wsite-section-bg-color:before {
  display: none;
}
.banner-wrap .container {
  position: relative;
  display: table;
  overflow-y: hidden;
  padding: 50px 0;
  box-sizing: border-box;
}
.banner-wrap .banner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #ffffff;
}
.banner-wrap .banner h2 {
  margin-bottom: 15px;
  color: #ffffff;
  font-size: 50px;
}
.banner-wrap .banner p {
  margin-bottom: 25px;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
.banner-wrap .banner .button-wrap {
  display: inline-block;
}
.banner-wrap .banner .wsite-button,
.banner-wrap .banner .wsite-button-large {
  text-align: center !important;
  background: transparent;
}
.banner-wrap .banner .wsite-button .wsite-button-inner,
.banner-wrap .banner .wsite-button-large .wsite-button-inner {
  background: #333333;
  color: #ffffff;
  border: 2px solid #333333;
  letter-spacing: 0.05em;
}
.banner-wrap .banner .wsite-button:hover .wsite-button-inner,
.banner-wrap .banner .wsite-button-large:hover .wsite-button-inner {
  background: #ffffff;
  color: #333333;
  border: 2px solid #333333;
}
.banner-wrap .banner .wsite-button-highlight .wsite-button-inner,
.banner-wrap .banner .wsite-button-large.wsite-button-highlight .wsite-button-inner {
  background: transparent;
  color: #ffffff !important;
  border: 2px solid #ffffff;
  letter-spacing: 0.05em;
}
.banner-wrap .banner .wsite-button-highlight:hover .wsite-button-inner,
.banner-wrap .banner .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner {
  background: #ffffff;
  color: #333333 !important;
  border: 2px solid #ffffff;
}
/* Content */
.content-wrap {
  background: #ffffff;
}
.content-wrap .container {
  padding: 40px 20px;
  box-sizing: border-box;
  height: 100vh; /*Set to full viewport high*/
}
/* Header page */
.header-page .wsite-header-section {
  height: 65vh;
}
/* No header page */
.no-header-page .content-wrap .container {
  padding-top: 20px;
}

<!DOCTYPE html>
<html>
<head>
</head>

<body class='no-header-page  wsite-theme-light'>

  <div class="wrapper">
    <div class="cento-header">
      <div class="container">
        <div class="logo">WEB TITLE</div>
      </div>
      <div class="nav-wrap">
        <div class="container">
          <div class="nav desktop-nav">
            <ul class="wsite-menu-default" id="top-menu">  
              <li><a class="active" href="#about"> ABOUT </a></li>
              <li><a href="#work"> WORK </a></li>
              <li><a href="#experience"> EXPERIENCE </a></li>
            </ul>
          </div>
        </div><!-- end .container -->
      </div><!-- end .nav-wrap -->
    </div><!-- end .header -->

    <div class="content-wrap">
      <p>Hello world</p>
    </div><!-- end content-wrap -->

  <script type="text/javascript" src="/files/theme/custom.js"></script>
</body>
</html>

Answer 1

马上我就可以告诉你这是因为你的导航栏在它粘住时从布局中删除了......这会改变滚动偏移的值，从而“反弹”其余元素。

您可以做的是将其包裹在一个固定高度的容器中，并在棒状活动期间离开包装纸。