CODEWITHSUNDEEP
javascriptjqueryhtmlcsswaypoint
Flo S
Flo S

Reputation: 1

Flickering problem with jQuery Waypoint sticky menu when scrolling over a section in Chrome

I am new to jQuery and Waypoint and have been googling everywhere to find an answer to this problem unsuccessfully and I am stumped. 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. The Chrome Developer Tools shows that my jQuery script toggles back and forth between adding "sticky" and removing "sticky" from the . This only happens on Chrome. I do not have this issue on Safari or Firefox. I am using jQuery v3.4.1 and 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!

Here is my Waypoint and 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:

<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>

Upvotes: 0

Views: 447

Answers (1)

Flo S
Flo S

Reputation: 1

I fixed the problem by completely redesigning my navigation and header. Also replaced the gradient banner with a background picture as cover. 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;

}

Upvotes: 0

Related Questions