Я новичок в jQuery и Waypoint и всюду гуглю, чтобы безуспешно найти ответ на эту проблему, и я в тупике. При прокрутке вниз в определенном месте появляется липкое меню, перекрывающее первый раздел веб-страницы, и начинает мигать, пока не достигнет второго раздела. Инструменты разработчика Chrome показывают, что мой скрипт jQuery переключается между добавлением «sticky» и «sticky» из. Это происходит только на Chrome. У меня нет этой проблемы в Safari или Firefox. Я использую jQuery v3.4.1 и Waypoint v.4.0.1. Ниже вы найдете фрагменты кода. Вот ссылка на Сайт , чтобы увидеть поведение. Как я могу исправить эту проблему? Любая помощь будет принята с благодарностью!
Я попытался добавить CSS-стили к своим классам-липучкам, но безрезультатно:
-webkit-transition: все на 0,5 секунды легчев 0с;переход: все 0,5 с, легкость в 0 с;-webkit-transform: translateZ (0);transform: translateZ (0);z-index: 9999;
- Я пытался увеличить и уменьшить смещение.
- Я пытался перемещаться по классу ".js - section-product" и id = id = "product" внутри раздела section-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>