JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="page-wrapper">
  <header class="header">
  </header>
  <main class="main">
  <div class="block"></div>
    <div class="account-track">
				<div class="account-track__container">
					<div class="account-track__col">
						<div class="account-track__content">
							<div class="account-track__title">
								<span class="account-track__name">Track Account </span>
								<span class="account-track__more">Learn more</span>
							</div>
							<p class="account-track__desc">Save this trip to track price changes and receive price alerts and travel tips by email</p>
						</div>
						<div class="account-track__switch">
							<form action="#" class="switch__form">
								<fieldset>
									<div class="switch__container">
										<input type="checkbox" id="switch-track">
										<label for="switch-track" class="switch__label">
											<span class="switch__toggle"></span>
										</label>
									</div>
								</fieldset>
							</form>
						</div>
					</div>
				</div>
				<div class="track-option">
					<form action="#" class="track-option__form">
						<fieldset>
							<div class="track-option__container">
								<h2>БЛОК 2</h2>
								<p class="track-option__subtitle">Testing text, bla, yo</p>
								<div class="track-option__content">
								</div>
							</div>
						</fieldset>
					</form>
				</div>
			</div>
			<div class="account-content">
				<div class="account__filter">
					<form action="#" class="account__filter-form">
						<fieldset>
							<div class="account__filter-container">
              <h2>БЛОК 1</h2>
							</div>
						</fieldset>
					</form>
				</div>
				<div class="account__product">
					<p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum esse autem, non rem facilis nobis eius alias sapiente omnis, soluta quidem commodi. Sequi libero possimus, accusamus! Incidunt omnis, dolorem...

SCSS

*, 
::after, 
::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  font-size: 14px;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

body,
input,
button,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

.main {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-top: 95px;
	min-height: 100%;
}

.header {
	display: flex;
	align-items: center;
	position: fixed;
	width: 100%;
	height: 95px;
	background: url('../img/header/header-bg.jpg') no-repeat;
	background-size: cover;
	z-index: 1002;

	&::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(22, 22, 23, .75);
	}
}
.switch__container {
	position: relative;
	width: 67px;
	height: 40px;
}

.switch__form input[type=checkbox] {
	position: absolute;
	top: 0;
	left: 0;
	width: 67px;
	height: 40px;
	opacity: 0;
	outline: none;
}

.switch__label {
	display: block;
	position: relative;
	width: 67px;
	height: 40px;
	background-color: #1f1f1f;
	border: 1px solid #181818;
	border-radius: 20px 20px;
	cursor: pointer;

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		margin-top: -9px;
		width: 18px;
		height: 18px;
		border: 1px solid #353535;
		border-radius: 8px 8px;
		transform: scale(1);
		transition: all 0.3s ease-out;
	}

	&::before {
		left: 10px;
	}

	&::after {
		right: 10px;
	}
}

.switch__toggle {
	display: block;
	position: absolute;
	left: 0;
	width: 40px;
	height: 40px;
	background-color:  rgba(16, 208, 190, .09);
	border-radius: 50%;
	overflow: hidden;
	transition: all 0.3s ease-out;

	&::after {
		content: '';
		position: absolute;
		top: 8px;
		right: 8px;
		bottom: 8px;
		left: 8px;
		background:...

JavaScript

$(document).ready(function() {
    $('input#switch-track').click(function() {

    $('input#switch-track').prop('checked', function() {
      $(".track-option").slideToggle();
    }); 
  });
});

$(document).ready(function() {
  function fixedFilter() {
      var accountFilter = $('.account__filter'),
        topAccountFilter = $(accountFilter).offset().top,
        heightHeader = $('.header').height();
      $(window).scroll(function() {
        var windowScroll = $(window).scrollTop() + heightHeader;
        if (windowScroll > topAccountFilter) {
          $(accountFilter).addClass('account__filter--fixed');
        } else {
          $(accountFilter).removeClass('account__filter--fixed');
        }
      });
  }

  $(document).ready(fixedFilter);
  $(window).on('resize', function () {
    fixedFilter();
  });
});