JSFiddle - React, Tailwind, and code Playground

HTML

<title>


  Page Title</title>

<body>

  <div>
    <div class="men">
      <h1>Men</h1></div>
    <div class="women">
      <h1>Women</h1></div>
  </div>

  <div class="content-women">
    <div class="introWomen">
      <h1>Women</h1></div>
    <div>
      <div class="part1women"></div>
    </div>
    <div class="part1text">
      <p>You are about to embark on a journey that is all work and no pay, your internship. The way you dress is a reflection of your professionalism. You are not considered a full-time staff member, yet you are still expected to reflect the professional
        standards of the company and this includes their dress code standards.</p>
    </div>

    <div class="part2text">
      <p>Dress codes vary between companies and industries. One may allow business casual with the optional dress-down Fridays and another may require formal business attire every day. Regardless, it is important to be appropriate in the style of clothing
        you choose. Skirts should never be worn with bare legs and miniskirts are something to avoid. While shorts are a trend to be adored, not every workplace accepts them so it’s best to stick to the basics until you become more familiar with your
        workplace. A general rule for hemlines is to place your arms straight against the side of your body and allow the hemline to fall below your fingertips.</p>
    </div>

  </div>



  <div class="content-men">
    <div class="introMen">
      <h1>Men</h1></div>
    <div>
      <div class="part1men"></div>
    </div>
    <div class="part1text">
      <p>You are about to embark on a journey that is all work and no pay, your internship. The way you dress is a reflection of your professionalism. You are not considered a full-time staff member, yet you are still expected to reflect the professional
        standards of the company and this includes their dress code standards.</p>
    </div>

    <div class="part2text">
      <p>Dress codes vary between companies and...

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Raleway', sans-serif;
}

.men h1,
.women h1 {
  font-family: 'Raleway', sans-serif;
  font-size: 4.2em;
  padding-top: 350px;
  color: white;
  text-align: center;
}

.men,
.women {
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  /* Firefox 4 */
  -webkit-transition: all 0.5s;
  /* Safari and Chrome */
  -o-transition: all 0.5s;
  /* Opera */
  border-bottom: solid 3px black;
}

.men {
  -webkit-filter: brightness(0.4);
  filter: brightness(0.4);
  background-image: url(https://images.unsplash.com/photo-1452475168325-672188dc4dc3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=90ac1d6a1647efae8f2e547893d8cdec);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: inline-block;
  height: 850px;
  width: 50%;
}

.women {
  -webkit-filter: brightness(0.4);
  filter: brightness(0.4);
  background-image: url(https://images.unsplash.com/photo-1452475168325-672188dc4dc3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=90ac1d6a1647efae8f2e547893d8cdec);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: inline-block;
  height: 850px;
  width: 50%;
}

.men:hover,
.women:hover {
  -webkit-filter: brightness(1);
  filter: brightness(1);
}

.content-women {
  height: 1800px;
}

.introWomen {
  background-image: url(https://images.unsplash.com/photo-1452475168325-672188dc4dc3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=90ac1d6a1647efae8f2e547893d8cdec);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 300px;
}

.part1women {
  position: absolute;
  width: 50%;
  height: 800px;
  background-image: url(https://images.unsplash.com/photo-1452475168325-672188dc4dc3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=90ac1d6a1647efae8f2e547893d8cdec);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.fixed {
  position: fixed;
 ...

JavaScript

$(document).ready(function() {

  var top = $('.part1women').offset().top - parseFloat($('.part1women').css('marginTop').replace(/auto/, 0));

  $(document).scroll(function() {
    console.log($(document).scrollTop());
  })

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

    // whether that's below the form
    if (y >= top) {
      // if so, ad the fixed class
      $('.part1women').addClass('fixed');
    } else {
      // otherwise remove it
      $('.part1women').removeClass('fixed');
    }
  });


  $(document).on("scroll", function() {
    if ($(document).scrollTop() > 2222) {
      $('.part1women').removeClass('fixed');
    }
  });

});