我是jQuery和Waypoint的新手，一直在谷歌上寻找这个问题的答案，但没有成功，我被难住了。向下滚动时，粘性菜单出现在与网页第一部分重叠的某个点，并开始闪烁，直到到达第二部分。Chrome开发工具显示，我的jQuery脚本在添加"粘性"和从中删除"粘性"之间来回切换。这种情况只在Chrome上发生。我在Safari或Firefox上没有这个问题。我使用的是jQuery v3.4.1和Waypoint v.4.0.1。您将在下面找到代码片段。这是网站的链接，可以查看行为。如何解决此问题？如有任何帮助，我们将不胜感激！
-
我尝试将CSS样式添加到我的粘性类中，但没有成功：
-webkit过渡：所有0.5秒轻松0秒；过渡：所有0.5秒在0秒内缓解；-webkit转换：translateZ(0(；变换：translateZ(0(；z索引：9999；
- 我试着增加和减少偏移量
- 我试着在类".js--section product"和id=id="product"之间移动，但这让情况变得更糟
这是我的Waypoint和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
};
});
}
}
});
});
})；
这是我的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>
我通过完全重新设计导航和标题来解决这个问题。还将渐变横幅替换为背景图片作为封面。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(
.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;
}