【发布时间】：2019-11-11 23:10:45
【问题描述】：
我是 jQuery 和 Waypoint 的新手，一直在谷歌上到处寻找这个问题的答案，但没有成功，我很难过。 向下滚动时，粘性菜单会出现在与网页第一部分重叠的某个点，并开始闪烁，直到到达第二部分。 Chrome 开发人员工具显示我的 jQuery 脚本在添加“粘性”和从 . 这只发生在 Chrome 上。我在 Safari 或 Firefox 上没有这个问题。 我正在使用 jQuery v3.4.1 和 Waypoint v.4.0.1。 您将在下面找到代码 sn-ps。 这是Website 的链接以查看行为。 我该如何解决这个问题？ 任何帮助将不胜感激！
-
我尝试将 CSS 样式添加到我的粘性类中，但无济于事：
-webkit-transition：所有 0.5s 缓入 0s； 过渡：所有 0.5s 缓入 0s； -webkit-transform: translateZ(0); 变换：translateZ（0）； z-index: 9999;
- 我尝试增加和减少偏移量。
- 我尝试在 section-product 部分内移动“.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>
【问题讨论】：
标签： javascript jquery html css waypoint