javascript - 在可滚动的固定定位元素上滚动时如何在标题上添加/删除类？

Question

当用户滚动到主要内容时，我想在 header 上添加/删除类。所有 header、main 和 footer 都是 fixed 定位的。我试过这个但没有用。最重要的是只有 main 是固定滚动的。

$(window).scroll(function() {
  if ($(window).scrollTop() >= 1) {
    $('header').addClass('fixed');
  } else {
    $('header').removeClass('fixed');
  }
});

html,
body {
  height: 100%;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #2d2d2d;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #d2d2d2;
}

main {
  padding: 0 25%;
  position: fixed;
  top: 60px;
  bottom: 40px;
  left: 0;
  right: 0;
  overflow-y: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <br />
  <br />
  <br />
  <br />
  <br />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <br />
  <br />
  <br />
  <br />
  <br />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <br />
  <br />
  <br />
  <br />
  <br />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <br />
  <br />
  <br />
  <br />
  <br />
</main>

Answer 1

您的错误是针对类 $('.header') 而不是元素 $('header')。

$('main').scroll(function() {
  if ($('main').scrollTop() >= 1) {
    $('header').addClass('fixed');
  } else {
    $('header').removeClass('fixed');
  }
});

html,
body {
  height: 100%;
  margin: 0;
}

.fixed {
  background: red;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #2d2d2d;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #d2d2d2;
}

main {
  padding: 0 25%;
  position: fixed;
  top: 60px;
  bottom: 40px;
  left: 0;
  right: 0;
  height: 100%;
  overflow-y: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header></header>
<main>
  <p>Bacon ipsum dolor amet t-bone tail filet mignon buffalo, capicola beef ribs brisket. Bresaola hamburger chicken strip steak. Turkey pork chop kevin, doner ham pancetta ball tip burgdoggen rump shankle. Sausage corned beef ribeye, picanha brisket shoulder
    shankle pork venison turkey rump. Ball tip kielbasa pig porchetta, brisket boudin filet mignon. Beef porchetta tri-tip shankle spare ribs short loin short ribs ham brisket.</p>

  <p>Jerky burgdoggen tri-tip, turkey cow meatball fatback beef ham hock pastrami salami porchetta capicola leberkas. Pork shankle bresaola pastrami rump ball tip brisket andouille picanha corned beef pig shank sausage. Picanha t-bone short loin, kielbasa
    ribeye ham hock pork belly pork chop shank drumstick. Cupim porchetta jerky pig kielbasa cow turkey.</p>

  <p>Flank pig prosciutto beef ribs. Pastrami flank ball tip filet mignon cupim hamburger boudin sausage drumstick shoulder shankle. Turducken tongue sirloin leberkas salami capicola t-bone andouille, pork chop tail. Landjaeger tail jerky, ribeye sausage
    alcatra frankfurter beef prosciutto pork. Kielbasa ham hock frankfurter sausage ball tip cupim beef ribs alcatra leberkas bresaola bacon. Swine biltong shoulder venison filet mignon.</p>

  <p>Short ribs strip steak t-bone bresaola, chuck jowl salami spare ribs landjaeger biltong brisket beef ribs doner sirloin. Flank tenderloin ground round burgdoggen beef ribs tri-tip. T-bone shank biltong picanha, boudin rump pancetta short ribs chuck.
    Meatball salami short ribs pork belly, beef ribs cow pork chop jowl frankfurter shoulder short loin bresaola.</p>

  <p>Landjaeger leberkas ribeye ham hock pork chop spare ribs pork loin tenderloin. Landjaeger turkey turducken, drumstick ham ball tip chicken andouille. Alcatra sirloin salami prosciutto beef ribs. Landjaeger pancetta tenderloin, shank pork loin chuck
    shoulder porchetta capicola sausage. Fatback tail burgdoggen doner tenderloin ball tip turkey biltong sausage pancetta pork short loin.</p>
</main>
<footer></footer>