向上滚动页面时添加类

Question

尝试在向上滚动页面时将类 .darkHeader 添加到 .nav。表示向下滚动时不会添加任何类，向下滚动时会在向上滚动页面时添加类，然后在向下滚动时删除。

代码sn-p：

// Script
$(window).scroll(function() {
  var scroll = $(window).scrollDown();

  if (scroll >= 100) {
    $(".nav").addClass("darkHeader");
  } else {
    $(".nav").removeClass("darkHeader");
  }
});

body {
  font-family: "Rokkitt", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 20px;
  background: #f8f8f0;
  margin: 0;
}

.darkHeader {
  background-color: black;
}

.nav {
  width: 100%;
  background-color: wheat;
  padding: 10px;
}

.menu {
  float: right;
  cursor: pointer;
  margin-top: -8px;
}

#content {
  margin-top: 150px;
  padding-top: 20px;
}

.wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 40px;
}

#top span {
  white-space: nowrap;
}

pre {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f0f0f0;
  padding: 0.5em;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  Sticky top navigation bar
</div>
<div class="wrap">
  <h3>Some filler text</h3>
  Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim
  jerky nostrud et venison shankle consectetur boudin landjaeger. Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur
  beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et. Ham hock irure reprehenderit chicken drumstick sausage ad, pig elit salami.
  Tri-tip consectetur t-bone salami, sunt jerky exercitation ham ut tempor nostrud enim. Beef ribs enim esse do non sausage. Chuck anim spare ribs ut ad deserunt, tri-tip chicken bacon tongue ball tip. Est tongue doner eiusmod veniam sint tenderloin deserunt
  bresaola strip steak fugiat proident pastrami.
  <p>Mollit turkey pork chop, drumstick tongue shank pastrami tempor. Reprehenderit consequat excepteur, in eiusmod ut incididunt short loin adipisicing tenderloin capicola fugiat. Ut non short ribs ball tip. Elit beef non flank reprehenderit hamburger.
    Fatback drumstick pancetta magna shankle corned beef pastrami spare ribs. Quis dolore beef non, veniam aliqua sirloin consectetur laboris shoulder pork leberkas short loin. Rump qui beef spare ribs drumstick andouille duis est esse irure strip steak
    labore.
  </p>
  <p>Tongue filet mignon pancetta, elit pariatur nostrud deserunt excepteur tri-tip salami in nisi. Ball tip beef fugiat, mollit officia jerky sirloin chuck dolore. Sausage fugiat spare ribs, tongue pork belly ut in. T-bone fatback anim nisi minim culpa
    laboris andouille meatball ham ut.</p>
  <p>Et turducken pork loin strip steak tempor enim nostrud magna minim qui adipisicing. Pork nulla mollit dolore. Nisi reprehenderit shank, hamburger jerky magna drumstick pancetta duis t-bone tempor cow proident ut. Andouille sed beef ribs tail chuck deserunt
    mollit beef adipisicing ribeye landjaeger. Shankle pig cillum aliquip, exercitation t-bone ground round prosciutto mollit chuck kevin brisket dolore ullamco. Pork chop capicola culpa doner nostrud filet mignon pork loin voluptate qui ut in aliquip
    pork belly.</p>
  <p>Deserunt pancetta pork loin cillum cupidatat laborum pork belly jerky short ribs prosciutto leberkas mollit non tail duis. Laborum in pork chop, venison filet mignon voluptate tail reprehenderit pig shankle rump deserunt in cupidatat. Landjaeger pork
    chop incididunt, irure occaecat mollit elit tenderloin excepteur anim kevin frankfurter tongue corned beef. Id pork chop magna et non velit. Boudin hamburger dolore eu ut culpa. In ut deserunt incididunt meatball ribeye, shoulder aute. Cillum labore
    occaecat salami quis laborum. Ex nulla pancetta ham hock tongue, andouille aute laborum velit strip steak beef ribs. Id corned beef excepteur filet mignon drumstick est magna consequat veniam enim exercitation sunt venison strip steak biltong. Cillum
    pancetta id quis biltong capicola corned beef. Boudin tongue in pariatur proident ut pork belly magna nulla swine.</p>
  <p>Ad aliquip officia, aute chuck qui veniam swine pancetta t-bone ribeye doner. Culpa velit eiusmod, ball tip nisi consectetur nostrud et sausage bresaola eu dolore. Turducken dolore irure commodo pork chop meatball duis short ribs, t-bone boudin bacon.
    Aliquip ad tri-tip swine eiusmod. Rump chicken kevin eu. Voluptate biltong commodo, hamburger esse non tempor sausage cillum eiusmod ribeye sunt shankle. Meatloaf short ribs voluptate brisket, pork belly bresaola ullamco chuck ball tip incididunt
    irure eu consequat hamburger leberkas. Meatball occaecat filet mignon, jowl kielbasa exercitation reprehenderit bresaola venison. Incididunt salami ham quis prosciutto pork loin cow irure labore venison sausage corned beef chicken. Laboris jowl strip
    steak quis spare ribs. In hamburger et ea bresaola turkey.</p>
  <p>Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim
    jerky nostrud et venison shankle consectetur boudin landjaeger. Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur
    beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et.</p>
  Ham hock irure reprehenderit chicken drumstick sausage ad, pig elit salami. Tri-tip consectetur t-bone salami, sunt jerky exercitation ham ut tempor nostrud enim. Beef ribs enim esse do non sausage. Chuck anim spare ribs ut ad deserunt, tri-tip chicken
  bacon tongue ball tip. Est tongue doner eiusmod veniam sint tenderloin deserunt bresaola strip steak fugiat proident pastrami. Mollit turkey pork chop, drumstick tongue shank pastrami tempor. Reprehenderit consequat excepteur, in eiusmod ut incididunt
  short loin adipisicing tenderloin capicola fugiat. Ut non short ribs ball tip. Elit beef non flank reprehenderit hamburger. Fatback drumstick pancetta magna shankle corned beef pastrami spare ribs. Quis dolore beef non, veniam aliqua sirloin consectetur
  laboris shoulder pork leberkas short loin. Rump qui beef spare ribs drumstick andouille duis est esse irure strip steak labore.
  <p>Tongue filet mignon pancetta, elit pariatur nostrud deserunt excepteur tri-tip salami in nisi. Ball tip beef fugiat, mollit officia jerky sirloin chuck dolore. Sausage fugiat spare ribs, tongue pork belly ut in. T-bone fatback anim nisi minim culpa
    laboris andouille meatball ham ut. Et turducken pork loin strip steak tempor enim nostrud magna minim qui adipisicing. Pork nulla mollit dolore. Nisi reprehenderit shank, hamburger jerky magna drumstick pancetta duis t-bone tempor cow proident ut.
    Andouille sed beef ribs tail chuck deserunt mollit beef adipisicing ribeye landjaeger. Shankle pig cillum aliquip, exercitation t-bone ground round prosciutto mollit chuck kevin brisket dolore ullamco. Pork chop capicola culpa doner nostrud filet
    mignon pork loin voluptate qui ut in aliquip pork belly. </p>
  Deserunt pancetta pork loin cillum cupidatat laborum pork belly jerky short ribs prosciutto leberkas mollit non tail duis. Laborum in pork chop, venison filet mignon voluptate tail reprehenderit pig shankle rump deserunt in cupidatat. Landjaeger pork
  chop incididunt, irure occaecat mollit elit tenderloin excepteur anim kevin frankfurter tongue corned beef. Id pork chop magna et non velit. Boudin hamburger dolore eu ut culpa. In ut deserunt incididunt meatball ribeye, shoulder aute. Cillum labore
  occaecat salami quis laborum. Ex nulla pancetta ham hock tongue, andouille aute laborum velit strip steak beef ribs. Id corned beef excepteur filet mignon drumstick est magna consequat veniam enim exercitation sunt venison strip steak biltong. Cillum
  pancetta id quis biltong capicola corned beef. Boudin tongue in pariatur proident ut pork belly magna nulla swine. Ad aliquip officia, aute chuck qui veniam swine pancetta t-bone ribeye doner. Culpa velit eiusmod, ball tip nisi consectetur nostrud et
  sausage bresaola eu dolore. Turducken dolore irure commodo pork chop meatball duis short ribs, t-bone boudin bacon. Aliquip ad tri-tip swine eiusmod. Rump chicken kevin eu. Voluptate biltong commodo, hamburger esse non tempor sausage cillum eiusmod
  ribeye sunt shankle. Meatloaf short ribs voluptate brisket, pork belly bresaola ullamco chuck ball tip incididunt irure eu consequat hamburger leberkas. Meatball occaecat filet mignon, jowl kielbasa exercitation reprehenderit bresaola venison. Incididunt
  salami ham quis prosciutto pork loin cow irure labore venison sausage corned beef chicken. Laboris jowl strip steak quis spare ribs. In hamburger et ea bresaola turkey. Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola.
  Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim jerky nostrud et venison shankle consectetur boudin landjaeger. Pork chop sed turkey
  aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum
  cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et. Ham hock irure reprehenderit chicken drumstick sausage ad, pig elit salami. Tri-tip consectetur t-bone salami, sunt jerky exercitation ham ut tempor nostrud
  enim. Beef ribs enim esse do non sausage. Chuck anim spare ribs ut ad deserunt, tri-tip chicken bacon tongue ball tip. Est tongue doner eiusmod veniam sint tenderloin deserunt bresaola strip steak fugiat proident pastrami.
  <p>Mollit turkey pork chop, drumstick tongue shank pastrami tempor. Reprehenderit consequat excepteur, in eiusmod ut incididunt short loin adipisicing tenderloin capicola fugiat. Ut non short ribs ball tip. Elit beef non flank reprehenderit hamburger.
    Fatback drumstick pancetta magna shankle corned beef pastrami spare ribs. Quis dolore beef non, veniam aliqua sirloin consectetur laboris shoulder pork leberkas short loin. Rump qui beef spare ribs drumstick andouille duis est esse irure strip steak
    labore. </p>
  Tongue filet mignon pancetta, elit pariatur nostrud deserunt excepteur tri-tip salami in nisi. Ball tip beef fugiat, mollit officia jerky sirloin chuck dolore. Sausage fugiat spare ribs, tongue pork belly ut in. T-bone fatback anim nisi minim culpa laboris
  andouille meatball ham ut.
  <p>Et turducken pork loin strip steak tempor enim nostrud magna minim qui adipisicing. Pork nulla mollit dolore. Nisi reprehenderit shank, hamburger jerky magna drumstick pancetta duis t-bone tempor cow proident ut. Andouille sed beef ribs tail chuck deserunt
    mollit beef adipisicing ribeye landjaeger. Shankle pig cillum aliquip, exercitation t-bone ground round prosciutto mollit chuck kevin brisket dolore ullamco. Pork chop capicola culpa doner nostrud filet mignon pork loin voluptate qui ut in aliquip
    pork belly.</p>
</div>

但它不起作用。仅在向上滚动页面时添加课程的任何方式？ （仅由 jQuery 提供）

Answer 1

首先：正如xwhyLikeThis所说，没有scrollDown

使用这个

// Script
$(window).on('scroll',function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 100) {
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    }
});

第二个你在 css 中的安排不好，你应该添加 !important

.darkHeader {
    background-color: black !important; 
    position: fixed;
}

或在 .nav 类之后添加 .darkHeader 类

DEMo HERE

Answer 2

好像没有scrollDown 方法。

我只是做了一个测试，似乎使用此代码可以达到您的目的：

var scroll = $(window).height() - $(window).scrollTop();

为了确保它只在向上滚动时添加类：

var previousScrollPos = 0;
//add this boolean flag to speed up the performance a bit...
var navAdded = false;
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if(scroll - previousScrollPos < 0 && !navAdded)
    {    
        navAdded = true;
        $(".nav").addClass("darkHeader");
    } else if(navAdded) {
       navAdded = false;
        $(".nav").removeClass("darkHeader");
    }
    previousScrollPos = scroll;
});

您的 css 有问题，它不会使导航出现。请参考其他答案。

JSFiddle 更新

Answer 3

在 jQuery 中没有名为 scrollDown() 的函数。使用scrollTop()。

var scroll = $(window).scrollTop();

您还需要将!important 添加到.darkHeader 类。

.darkHeader {
  background-color: black !important;  
}

另外我认为你需要position:fixed 才能看到nav。

.nav {
  width: 100%;
  background-color: wheat;
  padding: 10px;
  position:fixed; //Fixed
}

同时改变你的表达方式

 if (scroll <= 100) { 

更新了sn-p：

// Script
$(window).scroll(function() {
  var scroll = $(window).scrollTop();

  if (scroll <= 100) {
    $(".nav").addClass("darkHeader");
  } else {
    $(".nav").removeClass("darkHeader");
  }
});

body {
  font-family: "Rokkitt", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 20px;
  background: #f8f8f0;
  margin: 0;
}

.darkHeader {
  background-color: black !important;
}

.nav {
  width: 100%;
  background-color: wheat;
  padding: 10px;
  position: fixed;
}

.menu {
  float: right;
  cursor: pointer;
  margin-top: -8px;
}

#content {
  margin-top: 150px;
  padding-top: 20px;
}

.wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 40px;
}

#top span {
  white-space: nowrap;
}

pre {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f0f0f0;
  padding: 0.5em;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  Sticky top navigation bar
</div>
<div class="wrap">
  <h3>Some filler text</h3>
  Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim
  jerky nostrud et venison shankle consectetur boudin landjaeger. Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur
  beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et. Ham hock irure reprehenderit chicken drumstick sausage ad, pig elit salami.
  Tri-tip consectetur t-bone salami, sunt jerky exercitation ham ut tempor nostrud enim. Beef ribs enim esse do non sausage. Chuck anim spare ribs ut ad deserunt, tri-tip chicken bacon tongue ball tip. Est tongue doner eiusmod veniam sint tenderloin deserunt
  bresaola strip steak fugiat proident pastrami.
  <p>Mollit turkey pork chop, drumstick tongue shank pastrami tempor. Reprehenderit consequat excepteur, in eiusmod ut incididunt short loin adipisicing tenderloin capicola fugiat. Ut non short ribs ball tip. Elit beef non flank reprehenderit hamburger.
    Fatback drumstick pancetta magna shankle corned beef pastrami spare ribs. Quis dolore beef non, veniam aliqua sirloin consectetur laboris shoulder pork leberkas short loin. Rump qui beef spare ribs drumstick andouille duis est esse irure strip steak
    labore.
  </p>
  <p>Tongue filet mignon pancetta, elit pariatur nostrud deserunt excepteur tri-tip salami in nisi. Ball tip beef fugiat, mollit officia jerky sirloin chuck dolore. Sausage fugiat spare ribs, tongue pork belly ut in. T-bone fatback anim nisi minim culpa
    laboris andouille meatball ham ut.</p>
  <p>Et turducken pork loin strip steak tempor enim nostrud magna minim qui adipisicing. Pork nulla mollit dolore. Nisi reprehenderit shank, hamburger jerky magna drumstick pancetta duis t-bone tempor cow proident ut. Andouille sed beef ribs tail chuck deserunt
    mollit beef adipisicing ribeye landjaeger. Shankle pig cillum aliquip, exercitation t-bone ground round prosciutto mollit chuck kevin brisket dolore ullamco. Pork chop capicola culpa doner nostrud filet mignon pork loin voluptate qui ut in aliquip
    pork belly.</p>
  <p>Deserunt pancetta pork loin cillum cupidatat laborum pork belly jerky short ribs prosciutto leberkas mollit non tail duis. Laborum in pork chop, venison filet mignon voluptate tail reprehenderit pig shankle rump deserunt in cupidatat. Landjaeger pork
    chop incididunt, irure occaecat mollit elit tenderloin excepteur anim kevin frankfurter tongue corned beef. Id pork chop magna et non velit. Boudin hamburger dolore eu ut culpa. In ut deserunt incididunt meatball ribeye, shoulder aute. Cillum labore
    occaecat salami quis laborum. Ex nulla pancetta ham hock tongue, andouille aute laborum velit strip steak beef ribs. Id corned beef excepteur filet mignon drumstick est magna consequat veniam enim exercitation sunt venison strip steak biltong. Cillum
    pancetta id quis biltong capicola corned beef. Boudin tongue in pariatur proident ut pork belly magna nulla swine.</p>
  <p>Ad aliquip officia, aute chuck qui veniam swine pancetta t-bone ribeye doner. Culpa velit eiusmod, ball tip nisi consectetur nostrud et sausage bresaola eu dolore. Turducken dolore irure commodo pork chop meatball duis short ribs, t-bone boudin bacon.
    Aliquip ad tri-tip swine eiusmod. Rump chicken kevin eu. Voluptate biltong commodo, hamburger esse non tempor sausage cillum eiusmod ribeye sunt shankle. Meatloaf short ribs voluptate brisket, pork belly bresaola ullamco chuck ball tip incididunt
    irure eu consequat hamburger leberkas. Meatball occaecat filet mignon, jowl kielbasa exercitation reprehenderit bresaola venison. Incididunt salami ham quis prosciutto pork loin cow irure labore venison sausage corned beef chicken. Laboris jowl strip
    steak quis spare ribs. In hamburger et ea bresaola turkey.</p>
  <p>Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim
    jerky nostrud et venison shankle consectetur boudin landjaeger. Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur
    beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et.</p>
  Ham hock irure reprehenderit chicken drumstick sausage ad, pig elit salami. Tri-tip consectetur t-bone salami, sunt jerky exercitation ham ut tempor nostrud enim. Beef ribs enim esse do non sausage. Chuck anim spare ribs ut ad deserunt, tri-tip chicken
  bacon tongue ball tip. Est tongue doner eiusmod veniam sint tenderloin deserunt bresaola strip steak fugiat proident pastrami. Mollit turkey pork chop, drumstick tongue shank pastrami tempor. Reprehenderit consequat excepteur, in eiusmod ut incididunt
  short loin adipisicing tenderloin capicola fugiat. Ut non short ribs ball tip. Elit beef non flank reprehenderit hamburger. Fatback drumstick pancetta magna shankle corned beef pastrami spare ribs. Quis dolore beef non, veniam aliqua sirloin consectetur
  laboris shoulder pork leberkas short loin. Rump qui beef spare ribs drumstick andouille duis est esse irure strip steak labore.
  <p>Tongue filet mignon pancetta, elit pariatur nostrud deserunt excepteur tri-tip salami in nisi. Ball tip beef fugiat, mollit officia jerky sirloin chuck dolore. Sausage fugiat spare ribs, tongue pork belly ut in. T-bone fatback anim nisi minim culpa
    laboris andouille meatball ham ut. Et turducken pork loin strip steak tempor enim nostrud magna minim qui adipisicing. Pork nulla mollit dolore. Nisi reprehenderit shank, hamburger jerky magna drumstick pancetta duis t-bone tempor cow proident ut.
    Andouille sed beef ribs tail chuck deserunt mollit beef adipisicing ribeye landjaeger. Shankle pig cillum aliquip, exercitation t-bone ground round prosciutto mollit chuck kevin brisket dolore ullamco. Pork chop capicola culpa doner nostrud filet
    mignon pork loin voluptate qui ut in aliquip pork belly. </p>
  Deserunt pancetta pork loin cillum cupidatat laborum pork belly jerky short ribs prosciutto leberkas mollit non tail duis. Laborum in pork chop, venison filet mignon voluptate tail reprehenderit pig shankle rump deserunt in cupidatat. Landjaeger pork
  chop incididunt, irure occaecat mollit elit tenderloin excepteur anim kevin frankfurter tongue corned beef. Id pork chop magna et non velit. Boudin hamburger dolore eu ut culpa. In ut deserunt incididunt meatball ribeye, shoulder aute. Cillum labore
  occaecat salami quis laborum. Ex nulla pancetta ham hock tongue, andouille aute laborum velit strip steak beef ribs. Id corned beef excepteur filet mignon drumstick est magna consequat veniam enim exercitation sunt venison strip steak biltong. Cillum
  pancetta id quis biltong capicola corned beef. Boudin tongue in pariatur proident ut pork belly magna nulla swine. Ad aliquip officia, aute chuck qui veniam swine pancetta t-bone ribeye doner. Culpa velit eiusmod, ball tip nisi consectetur nostrud et
  sausage bresaola eu dolore. Turducken dolore irure commodo pork chop meatball duis short ribs, t-bone boudin bacon. Aliquip ad tri-tip swine eiusmod. Rump chicken kevin eu. Voluptate biltong commodo, hamburger esse non tempor sausage cillum eiusmod
  ribeye sunt shankle. Meatloaf short ribs voluptate brisket, pork belly bresaola ullamco chuck ball tip incididunt irure eu consequat hamburger leberkas. Meatball occaecat filet mignon, jowl kielbasa exercitation reprehenderit bresaola venison. Incididunt
  salami ham quis prosciutto pork loin cow irure labore venison sausage corned beef chicken. Laboris jowl strip steak quis spare ribs. In hamburger et ea bresaola turkey. Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola.
  Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim jerky nostrud et venison shankle consectetur boudin landjaeger. Pork chop sed turkey
  aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum
  cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et. Ham hock irure reprehenderit chicken drumstick sausage ad, pig elit salami. Tri-tip consectetur t-bone salami, sunt jerky exercitation ham ut tempor nostrud
  enim. Beef ribs enim esse do non sausage. Chuck anim spare ribs ut ad deserunt, tri-tip chicken bacon tongue ball tip. Est tongue doner eiusmod veniam sint tenderloin deserunt bresaola strip steak fugiat proident pastrami.
  <p>Mollit turkey pork chop, drumstick tongue shank pastrami tempor. Reprehenderit consequat excepteur, in eiusmod ut incididunt short loin adipisicing tenderloin capicola fugiat. Ut non short ribs ball tip. Elit beef non flank reprehenderit hamburger.
    Fatback drumstick pancetta magna shankle corned beef pastrami spare ribs. Quis dolore beef non, veniam aliqua sirloin consectetur laboris shoulder pork leberkas short loin. Rump qui beef spare ribs drumstick andouille duis est esse irure strip steak
    labore. </p>
  Tongue filet mignon pancetta, elit pariatur nostrud deserunt excepteur tri-tip salami in nisi. Ball tip beef fugiat, mollit officia jerky sirloin chuck dolore. Sausage fugiat spare ribs, tongue pork belly ut in. T-bone fatback anim nisi minim culpa laboris
  andouille meatball ham ut.
  <p>Et turducken pork loin strip steak tempor enim nostrud magna minim qui adipisicing. Pork nulla mollit dolore. Nisi reprehenderit shank, hamburger jerky magna drumstick pancetta duis t-bone tempor cow proident ut. Andouille sed beef ribs tail chuck deserunt
    mollit beef adipisicing ribeye landjaeger. Shankle pig cillum aliquip, exercitation t-bone ground round prosciutto mollit chuck kevin brisket dolore ullamco. Pork chop capicola culpa doner nostrud filet mignon pork loin voluptate qui ut in aliquip
    pork belly.</p>
</div>

Answer 4

试试这个应该可以的

 $(window).scroll(function() {    
var scroll = $(window).scrollTop();

if (scroll <= 100) {
    $(".nav").addClass("darkHeader");
}
else{

    $(".nav").removeClass("darkHeader");
}
 });