如何防止铬闪烁时，使导航固定在滚动？

Question

我试图使导航菜单成为固定的卷轴。

这种效果最好用小提琴来表现，因为小提琴比散文更简洁：

​

$(function() {

  var secondaryNav = $(".secondary-navigation");
  var secondaryNavScrollTop = secondaryNav.offset().top;

  $(window).on("scroll", function() {

    if ($(window).scrollTop() > secondaryNavScrollTop) {
      $("body").css("padding-top", "100px");
      secondaryNav.addClass("stuck");
    } else {
      $("body").css("padding-top", "0px");
      secondaryNav.removeClass("stuck");
    }

  });

});

* {
  margin: 0;
  padding: 0;
}
.section-jumbo {
  background-color: red;
  padding: 150px;
}
.secondary-navigation {
  text-align: center;
  background-color: tomato;
}
li {
  display: inline-block;
  height: 100px;
}
a {
  position: relative;
  display: inherit;
  padding: 60px 40px 0 40px;
}
main section {
  margin: 20px 0;
}
.stuck {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  opacity: .9;
}

<section class="section-jumbo">
</section>
<div class="secondary-navigation">
  <nav>
    <ul>
      <li><a href="#">Intro</a>
      </li>
      <li><a href="#">Features</a>
      </li>
      <li><a href="#">Pictures</a>
      </li>
      <li><a href="#">Buy</a>
      </li>
    </ul>
  </nav>
</div>
<main>
  <section>
    <h2>Title</h2>
    <p>Portland artisan letterpress drinking vinegar salvia pork belly. Next level art party bitters 90's. High Life Pitchfork mixtape, hoodie photo booth hashtag viral retro asymmetrical bitters scenester Cosby sweater iPhone normcore slow-carb. Umami post-ironic
      Godard fap you probably haven't heard of them, seitan next level four loko. Locavore jean shorts church-key beard small batch. Drinking vinegar dreamcatcher pop-up banjo plaid narwhal, hoodie McSweeney's. Chambray blog Truffaut Blue Bottle tilde,
      squid asymmetrical High Life church-key keytar readymade.</p>
  </section>
  <section>
    <h2>Title</h2>
    <p>Portland artisan letterpress drinking vinegar salvia pork belly. Next level art party bitters 90's. High Life Pitchfork mixtape, hoodie photo booth hashtag viral retro asymmetrical bitters scenester Cosby sweater iPhone normcore slow-carb. Umami post-ironic
      Godard fap you probably haven't heard of them, seitan next level four loko. Locavore jean shorts church-key beard small batch. Drinking vinegar dreamcatcher pop-up banjo plaid narwhal, hoodie McSweeney's. Chambray blog Truffaut Blue Bottle tilde,
      squid asymmetrical High Life church-key keytar readymade.</p>
  </section>
  <section>
    <h2>Title</h2>
    <p>Portland artisan letterpress drinking vinegar salvia pork belly. Next level art party bitters 90's. High Life Pitchfork mixtape, hoodie photo booth hashtag viral retro asymmetrical bitters scenester Cosby sweater iPhone normcore slow-carb. Umami post-ironic
      Godard fap you probably haven't heard of them, seitan next level four loko. Locavore jean shorts church-key beard small batch. Drinking vinegar dreamcatcher pop-up banjo plaid narwhal, hoodie McSweeney's. Chambray blog Truffaut Blue Bottle tilde,
      squid asymmetrical High Life church-key keytar readymade.</p>
  </section>
  <section>
    <h2>Title</h2>
    <p>Portland artisan letterpress drinking vinegar salvia pork belly. Next level art party bitters 90's. High Life Pitchfork mixtape, hoodie photo booth hashtag viral retro asymmetrical bitters scenester Cosby sweater iPhone normcore slow-carb. Umami post-ironic
      Godard fap you probably haven't heard of them, seitan next level four loko. Locavore jean shorts church-key beard small batch. Drinking vinegar dreamcatcher pop-up banjo plaid narwhal, hoodie McSweeney's. Chambray blog Truffaut Blue Bottle tilde,
      squid asymmetrical High Life church-key keytar readymade.</p>
  </section>
  <section>
    <h2>Title</h2>
    <p>Portland artisan letterpress drinking vinegar salvia pork belly. Next level art party bitters 90's. High Life Pitchfork mixtape, hoodie photo booth hashtag viral retro asymmetrical bitters scenester Cosby sweater iPhone normcore slow-carb. Umami post-ironic
      Godard fap you probably haven't heard of them, seitan next level four loko. Locavore jean shorts church-key beard small batch. Drinking vinegar dreamcatcher pop-up banjo plaid narwhal, hoodie McSweeney's. Chambray blog Truffaut Blue Bottle tilde,
      squid asymmetrical High Life church-key keytar readymade.</p>
  </section>
  <section>
    <h2>Title</h2>
    <p>Portland artisan letterpress drinking vinegar salvia pork belly. Next level art party bitters 90's. High Life Pitchfork mixtape, hoodie photo booth hashtag viral retro asymmetrical bitters scenester Cosby sweater iPhone normcore slow-carb. Umami post-ironic
      Godard fap you probably haven't heard of them, seitan next level four loko. Locavore jean shorts church-key beard small batch. Drinking vinegar dreamcatcher pop-up banjo plaid narwhal, hoodie McSweeney's. Chambray blog Truffaut Blue Bottle tilde,
      squid asymmetrical High Life church-key keytar readymade.</p>
  </section>
  <section>
    <h2>Title</h2>
    <p>Portland artisan letterpress drinking vinegar salvia pork belly. Next level art party bitters 90's. High Life Pitchfork mixtape, hoodie photo booth hashtag viral retro asymmetrical bitters scenester Cosby sweater iPhone normcore slow-carb. Umami post-ironic
      Godard fap you probably haven't heard of them, seitan next level four loko. Locavore jean shorts church-key beard small batch. Drinking vinegar dreamcatcher pop-up banjo plaid narwhal, hoodie McSweeney's. Chambray blog Truffaut Blue Bottle tilde,
      squid asymmetrical High Life church-key keytar readymade.</p>
  </section>
  <section>
    <h2>Title</h2>
    <p>Portland artisan letterpress drinking vinegar salvia pork belly. Next level art party bitters 90's. High Life Pitchfork mixtape, hoodie photo booth hashtag viral retro asymmetrical bitters scenester Cosby sweater iPhone normcore slow-carb. Umami post-ironic
      Godard fap you probably haven't heard of them, seitan next level four loko. Locavore jean shorts church-key beard small batch. Drinking vinegar dreamcatcher pop-up banjo plaid narwhal, hoodie McSweeney's. Chambray blog Truffaut Blue Bottle tilde,
      squid asymmetrical High Life church-key keytar readymade.</p>
  </section>
  <section>
    <h2>Title</h2>
    <p>Portland artisan letterpress drinking vinegar salvia pork belly. Next level art party bitters 90's. High Life Pitchfork mixtape, hoodie photo booth hashtag viral retro asymmetrical bitters scenester Cosby sweater iPhone normcore slow-carb. Umami post-ironic
      Godard fap you probably haven't heard of them, seitan next level four loko. Locavore jean shorts church-key beard small batch. Drinking vinegar dreamcatcher pop-up banjo plaid narwhal, hoodie McSweeney's. Chambray blog Truffaut Blue Bottle tilde,
      squid asymmetrical High Life church-key keytar readymade.</p>
  </section>
  <section>
    <h2>Title</h2>
    <p>Portland artisan letterpress drinking vinegar salvia pork belly. Next level art party bitters 90's. High Life Pitchfork mixtape, hoodie photo booth hashtag viral retro asymmetrical bitters scenester Cosby sweater iPhone normcore slow-carb. Umami post-ironic
      Godard fap you probably haven't heard of them, seitan next level four loko. Locavore jean shorts church-key beard small batch. Drinking vinegar dreamcatcher pop-up banjo plaid narwhal, hoodie McSweeney's. Chambray blog Truffaut Blue Bottle tilde,
      squid asymmetrical High Life church-key keytar readymade.</p>
  </section>
  <section>
    <h2>Title</h2>
    <p>Portland artisan letterpress drinking vinegar salvia pork belly. Next level art party bitters 90's. High Life Pitchfork mixtape, hoodie photo booth hashtag viral retro asymmetrical bitters scenester Cosby sweater iPhone normcore slow-carb. Umami post-ironic
      Godard fap you probably haven't heard of them, seitan next level four loko. Locavore jean shorts church-key beard small batch. Drinking vinegar dreamcatcher pop-up banjo plaid narwhal, hoodie McSweeney's. Chambray blog Truffaut Blue Bottle tilde,
      squid asymmetrical High Life church-key keytar readymade.</p>
  </section>
  <section>
    <h2>Title</h2>
    <p>Portland artisan letterpress drinking vinegar salvia pork belly. Next level art party bitters 90's. High Life Pitchfork mixtape, hoodie photo booth hashtag viral retro asymmetrical bitters scenester Cosby sweater iPhone normcore slow-carb. Umami post-ironic
      Godard fap you probably haven't heard of them, seitan next level four loko. Locavore jean shorts church-key beard small batch. Drinking vinegar dreamcatcher pop-up banjo plaid narwhal, hoodie McSweeney's. Chambray blog Truffaut Blue Bottle tilde,
      squid asymmetrical High Life church-key keytar readymade.</p>
  </section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

这个实现的问题是，在Chrome中，当应用.stuck类时，导航菜单偶尔会闪烁。

我怀疑当padding-top被应用到body时，我所观察到的是滞后，这是在应用.stuck类的同时发生的。

我怎样才能避免Chrome中这种烦人的闪烁呢？

(请注意，由于某种原因，在可运行的代码段中无法观察到闪烁。要进行复制，必须在本地运行代码。)

Answer 1

我已经在本地试过了，在Chromev.37中看不到闪烁。

不要同时执行$("body").css更改和SecondaryNav.addClass / .removeClass，而是尝试将其作为一个不可分割的操作执行。

只需执行$(“body”).addClass(“卡住”)/ .removeClass即可。

然后更改css以替换

.stuck { ...

使用

body.stuck .secondary-navigation { ...