个人中心
gpt4 book ai didi

javascript - 滚动浏览 Chrome 中的某个部分时，jQuery Waypoint 粘性菜单出现闪烁问题

转载 作者：行者123 更新时间：2023-11-27 23:04:24 24 4
gpt4 key购买 nike

我是 jQuery 和 Waypoint 的新手，一直在谷歌上到处搜索以找到这个问题的答案，但没有成功，我被难住了。向下滚动时，粘性菜单会出现在与网页第一部分重叠的特定位置，并开始闪烁，直到到达第二部分。Chrome 开发人员工具显示我的 jQuery 脚本在添加“粘性”和从 .这只发生在 Chrome 上。我在 Safari 或 Firefox 上没有这个问题。我正在使用 jQuery v3.4.1 和 Waypoint v.4.0.1。您会在下面找到代码片段。这是 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>

最佳答案

我通过完全重新设计导航和页眉解决了这个问题。还用背景图片替换了渐变横幅作为封面。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;

关于javascript - 滚动浏览 Chrome 中的某个部分时，jQuery Waypoint 粘性菜单出现闪烁问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58809859/

24 4 0
文章推荐： javascript - 如何在每个元素上调用 jquery.each 循环遍历数组？
文章推荐： c++ - 没有已定义函数的匹配函数
文章推荐： javascript - jQuery 使用 $.get 页面读取标题
文章推荐： C++将字符串数组传递给函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com