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>

此实施的问题在于，在应用.stuck类时，导航菜单偶尔会闪烁。

当padding-top应用于body时，我怀疑我观察到的是滞后，.stuck在应用{{1}}类的同时发生。

如何在Chrome中避免这种麻烦的闪烁？

（请注意，由于某种原因，在可运行的代码段中无法观察到闪烁。要重现，您必须在本地运行代码。）

Answer 1

我在本地尝试过，无法看到Chrome v.37中的闪烁。

不要同时执行$（“body”）。css更改和SecondaryNav.addClass / .removeClass，而是尝试将其作为单个不可分割的操作。

简单地执行$（“body”）。addClass（“stuck”）/ .removeClass。

然后更改你的css以替换

.stuck { ...

与

body.stuck .secondary-navigation { ...

滚动时固定导航时如何防止Chrome闪烁？

1 个答案: