Question

我的导航栏受益于一项功能，只要轻轻滚动一下，导航栏就会变小。我还添加了一个滚动更改的徽标。但是在徽标更改动画中，当您向上滚动页面时，会有一些非常烦人的闪烁。我相信这是我的JS的问题。您能否看一下，告诉我您正在经历什么？谢谢。

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 2) {

    $('.miniBanner').addClass('show')
    $('.logoBanner').addClass('hide')
    $("header").addClass("shrink")
    $("header").removeClass("grow")

  } else {

    $('.miniBanner').removeClass('show')
    $('.logoBanner').removeClass('hide')
    $("header").removeClass("shrink");
    $("header").addClass("grow")
  }
});

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

header {
  width: 100%;
  padding: 30px 0px;
  /* revert to 50px 0px if we want the scroll animation */
  /*animation magic*/
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  z-index: 9999;
  top: 0;
  position: sticky;
  margin: 0;
  background-color: white;
  box-shadow: 1px 1px 16px 2px red;
}

.shrink {
  padding: 10px 0;
  box-shadow: 1px 1px 16px 2px #0000a0;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  visibility: visible;
  opacity: 1;
}

.grow {
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
}

header.shrink .logoBanner {
  width: 8vw;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
}

header.grow .logoBanner {
  width: 100vw;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
}

.miniBanner {
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
}

.miniBanner.show {
  display: flex;
  transition: all 0.4s ease-in-out;
  visibility: visible;
  opacity: 1;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  width: 5vw
}

.logoBanner.hide {
  visibility: hidden;
  opacity: 0;
  display: none;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
}

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  width: 90%;
  padding: 0;
  margin: 0;
}

a {
  width: 80px;
  display: block;
  margin: 5px;
  border-radius: 15px;
  padding-top: 5px;
}

li {
  justify-content: center;
  text-align: center;
}

li a {
  background-color: white;
  text-decoration: none;
  color: #0000a0;
}

.logo {
  /* brand guidelines */
  display: flex;
  justify-content: flex-start;
  margin-right: 70%;
  justify-content: center;
  align-items: center;
}

.logoBanner {
  width: 250vw;
  background-color: white
}

.page {
  height: 200vh;
  width: 100vw;
}

    <script
    src="https://code.jquery.com/jquery-3.4.1.js"
    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.min.js"></script>
    </script>
    <body>
      <header>
        <ul>
          <a href="#" class="logo">
            <img class='logoBanner' src="https://2.bp.blogspot.com/_ORzF0-MDB50/TUI5aoTbDrI/AAAAAAAAEy0/kVSBqTuv1N0/s1600/bufforphington.jpg" alt="">
            <img class='miniBanner' src="https://www.almanac.com/sites/default/files/users/AlmanacStaffArchive/hatching-raising-chicken-chicks_full_width.jpg" alt="">
          </a>
          <li><a href="#">Portal</a></li>
          <li><a href="#">Feedback</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </header>
      <div class=page></div>
    </body>

导航栏帮助-闪烁

0 个答案: