在 Chrome 中滚动某个部分时，jQuery Waypoint 粘性菜单出现闪烁问题

Question

I am new to jQuery and Waypoint and have been googling everywhere to find an answer to this problem unsuccessfully and I am stumped.我是 jQuery 和 Waypoint 的新手，我一直在谷歌上搜索这个问题的答案，但没有成功，我很困惑。 While scrolling down, the sticky menu appears at a certain point overlapping the first section of the web page and starts flickering until it reaches the second section.向下滚动时，粘性菜单会出现在与 web 页面的第一部分重叠的某个点，并开始闪烁，直到到达第二部分。 The Chrome Developer Tools shows that my jQuery script toggles back and forth between adding "sticky" and removing "sticky" from the. Chrome 开发人员工具显示我的 jQuery 脚本在添加“粘性”和从中删除“粘性”之间来回切换。 This only happens on Chrome.这只发生在 Chrome 上。 I do not have this issue on Safari or Firefox.我在 Safari 或 Firefox 上没有这个问题。 I am using jQuery v3.4.1 and Waypoint v.4.0.1.我正在使用 jQuery v3.4.1 和 Waypoint v.4.0.1。 You will find below code snippets.您将在下面找到代码片段。 Here is the link to the Website to see the behaviour.这是该网站的链接以查看该行为。 How can I fix this issue?我该如何解决这个问题？ Any help would be greatly appreciated!任何帮助将不胜感激！

I tried adding CSS styling to my sticky classes to no avail:我尝试将 CSS 样式添加到我的粘性类中无济于事：
-webkit-transition: all 0.5s ease-in 0s; -webkit-transition：所有 0.5s 缓入 0s； transition: all 0.5s ease-in 0s;过渡：所有 0.5s 缓入 0s； -webkit-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0);变换：translateZ（0）； z-index: 9999; z指数：9999；
- I tried increasing and decreasing the offset.我尝试增加和减少偏移量。
- I tried moving around the class ".js--section-product" and id=id="product" inside the section-product section but it made things worse.我尝试在 section-product 部分中移动 class ".js--section-product" 和 id=id="product" ，但这使事情变得更糟。

Here is my Waypoint and jQuery:这是我的航点和 jQuery：

$(document).ready(function () {
/* For the sticky navigation */
$('.js--section-product').waypoint(function(direction) {
    if (direction == "down") {
      $('header').addClass('sticky');

    } else {
      $('header').removeClass('sticky');
   }
}, {
    offset: '20%'
});

/* Navigation scroll */
$(function() {
  // Select all links with hashes
  $('a[href*="#"]')
    // Remove links that don't actually link to anything
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
      let nav = $('.js--navigation__nav');
      let icon = $('.js--nav-icon ion-icon');
      if (icon.attr("name") === "close") { //if on mobile view, menu is open and must be closed
          nav.slideToggle(200); //when a link is clicked on mobile close menu
          icon.attr("name", "menu")  //then replace with "close" icon 
        } 
      // On-page links
      if (
        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
        &&
        location.hostname == this.hostname
      ) {
        // Figure out element to scroll to
        var target = $(this.hash);
         target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
          // Only prevent default if animation is actually gonna happen
          event.preventDefault();
          console.log('Link scroll down=', target.offset().top)
          $('html, body').animate({
            scrollTop: target.offset().top //{scrollTop: targetOffset - 100} ?
          }, 1000, function() {
            // Callback after animation
            // Must change focus!
            var $target = $(target); //refers to the jQuery representation of the dom object
            $target.focus();
            if ($target.is(":focus")) { // Checking if the target was focused
              return false;
            } else {
              $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
              $target.focus(); // Set focus again
            };
          });
        }
      }
    });
  });

}); });

Here is part of my index.html file:这是我的 index.html 文件的一部分：

<body>
<header class="header">
    <img src="img/logo_MlleLaSalxpe_NoirEtBlanc.svg" alt="logo" class="header__logo">
    <div class="navigation">
          <a class="mobile-nav-icon js--nav-icon"><ion-icon name="menu"></ion-icon></a>
            <nav class="navigation__nav js--navigation__nav">
                <ul class="navigation__list">
                    <li class="navigation__item"><a href="#product" class="navigation__link">Product</a></li>
                    <li class="navigation__item"><a href="#vision" class="navigation__link">Our vision</a></li>
                    <li class="navigation__item"><a href="#shades" class="navigation__link">The Shades</a></li>
                    <li class="navigation__item"><a href="#signup" class="navigation__link">La Première Dame</a></li>
                    <!-- <li class="navigation__item"><a href="#" class="navigation__link">Find a store</a></li> -->
                    <li class="navigation__item"><a href="#contact" class="navigation__link">Contact Us</a></li>
                </ul>
            </nav>
    </div>
</header>
<main>
    <section class="section-banner">
        <div class="section-banner__box">
                <h1 class="heading-primary u-center-text">
                Stand in the Sun
                </h1>
        </div>
    </section>
    <section class="section-product js--section-product" id="product">
        <div class="heading__text-box u-center-text u-margin-top-big">
            <h2 class="heading-secondary u-margin-bottom-big ">
                <span class="heading-secondary--main">Product</span>
                <span class="heading-secondary--sub">Psaume 4</span>
                <span class="heading-secondary--sub2 ">The All-In-One Skincare Foundation</span>
            </h2>
        </div>
     </section>

Answer 1

I fixed the problem by completely redesigning my navigation and header.我通过完全重新设计我的导航和 header 解决了这个问题。 Also replaced the gradient banner with a background picture as cover.还用背景图片替换了渐变横幅作为封面。 1) ` 1) `

    <nav>
        <div class="row">
                <img src="img/logoMlleLaSalxpe_name-white.png" alt="logo" class="header__logo-white">
                <img src="img/logo_MlleLaSalxpe_name-black.png" alt="logo" class="header__logo-black">
            <ul class="navigation js--navigation">
                    <li><a href="#product">Product</a></li>
                    <li><a href="#vision">Our vision</a></li>
                    <li><a href="#shades">The Shades</a></li>
                    <li><a href="#signup">La Première Dame</a></li>
                    <li ><a href="#contact">Contact Us</a></li>
            </ul>
            <a class="mobile-nav-icon js--nav-icon"><ion-icon name="menu"></ion-icon></a>
        </div>
    </nav>
    <div class="slogan-text__box">
            <h1 class="heading-primary u-center-text">Stand in the Sun</h1>
            <div class="u-center-content">
                <a class= "button-full" href="#signup">Sign Up</a>
            </div>

    </div>
</header>`

2) 2)

.header {
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../img/AdobeStock_sunrise2.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;

} }

在 Chrome 中滚动某个部分时，jQuery Waypoint 粘性菜单出现闪烁问题

问题描述

1 个解决方案

解决方案1
0 2019-11-23 22:24:25

在 Chrome 中滚动某个部分时，jQuery Waypoint 粘性菜单出现闪烁问题

问题描述

1 个解决方案

解决方案1 0 2019-11-23 22:24:25

解决方案1
0 2019-11-23 22:24:25