<div class="container">
	<div class="row">
		<div class="col-6">
			<div class="h1-wrapper  position-relative">
				<h1>$1.</h1>
				<div class="h1-section">
					h1... h1... h1... h1... h1... h1... h1... h1... h1... h1... h1...
					<div class="h2-wrapper  position-relative">
						<h2>$2.</h2>
						<div class="h2-section">
							<div class="h3-wrapper  position-relative">
								<h3 class="sticky-top">$3.</h3>
								<div class="h3-section">
									<p>text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... </p>
								</div>
							</div>
							<div class="h3-wrapper  position-relative">
								<h3 class="sticky-top">$3.</h3>
								<div class="h3-section">
									<p>text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... </p>
								</div>
							</div>
							<div class="h3-wrapper  position-relative">
								<h3 class="sticky-top">$3.</h3>
								<div class="h3-section">
									<p>text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... </p>
								</div>
							</div>
						</div>
					</div>
					<div class="h2-wrapper  position-relative">
						<h2>$2.</h2>
						<div class="h2-section">
							<div class="h3-wrapper  position-relative">
								<h3 class="sticky-top">$3-1.</h3>
								<div class="h3-section">
									<p>text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... </p>
									<p>text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... </p>
									<p>text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... </p>
									<p>text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... </p>
								</div>
							</div>
							<div class="h3-wrapper  position-relative">
								<h3 class="sticky-top">$3-2.</h3>
								<div class="h3-section">
									<p>text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... </p>
									<p>text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... </p>
									<p>text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... </p>
								</div>
							</div>
							<div class="h3-wrapper  position-relative">
								<h3 class="sticky-top">$3-3.</h3>
								<div class="h3-section">
									<p>text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... </p>
									<p>text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... </p>
									<p>text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... text... text... text... text... text...
										text... text... text... text... text... text... text... </p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
$(window).scroll(function(){
  $('.sticky-top').each(function(){
    var y = $(this).position().top;
    if ( 0 < y ) {
      $(this).addClass('bg-primary');
    } else {
      $(this).removeClass('bg-primary');
    }
  });
})

External CSS

  1. https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
  2. https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.3.1.slim.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
  3. https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js