How to add/remove class on header when scrolling on a scrollable fixed positioned element?

Question

I want to add/remove class on header when user scroll to main content. All header, main and footer are fixed positioned. I tried this one but not working. Most important thing is only main is scrollable with fixed.

$(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

Your mistake was targeting the class $('.header') instead of element $('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>