<div class="fixed-bar">
<label>Turn off fixed background attachment<input type="checkbox" id="turn-off" /></label>
</div>
<div class="body-wrapper">
<div class="first background-div" id="large-image-one">
  <h2 class="caption-header">Home Decor</h2>
</div>
<section class="wrapper">
  <div class="background-wrapper background-div" id="first">
    <h2 class="caption-header">gift ideas</h2></div>
  <div class="background-wrapper background-div" id="second"><h2 class="caption-header">categories</h2></div>
  <div class="background-wrapper background-div" id="third"><h2 class="caption-header">collections</h2></div>
</section>

</div>
<div class="body-wrapper">
<div class="first background-div" id="large-image-two">
  <h2 class="caption-header">popular & trending</h2>
</div>
<section class="wrapper" style="order: -1; padding-left: 0; padding-right: 20px">
  <div class="background-wrapper background-div" id="fourth"><h2 class="caption-header">new</h2></div>
  <div class="background-wrapper background-div" id="fifth"><h2 class="caption-header">mugs</h2></div>
  <div class="background-wrapper background-div" id="sixth"><h2 class="caption-header">jewelry</h2></div>
</section>
</div>

/*autoprefixer and reset used*/
/*Look best on a tall monitor with full page*/
body {
  padding: 20px 20px 0 20px;
  /*this height is just to demonstrate what it looks to scroll past the bottom images*/
  height: 4000px;
  font: 100% 'Yanone Kaffeesatz', sans-serif;
}
.fixed-bar {
  position: fixed;
  top: 0;
  left: 20px;
  background: #fff;
  z-index: 10
}
input, label {
  color: red
}
.body-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 20px;
  max-width: 1280px;
  margin: 0 auto
}
.first, .wrapper {
  height: 100vh;
  /*Change as needed.  This prevents the smaller images from getting scrunched up*/
  min-height: 600px;
  flex-basis: 50%;
  cursor: pointer;
  
  transition: flex-basis 0.4s ease-in-out 0.2s;
  text-align: center;
  overflow: hidden
}
.caption-header {
  font-weight: 100;
  background: rgba(25,25,25,0.8);
  color: #fff;
  padding: 10px 0;
  font-size: 1.5em;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out 0.4s
}
.first:hover, .wrapper:hover {
  flex-basis: 100%
}
.wrapper {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px
}
.background-wrapper {
  flex-basis: 33.333%;
  margin-bottom: 20px;
  width: 100%;
  transition: flex-basis 0.4s ease-in-out 0.2s;
  cursor: pointer;
  overflow: hidden
}
.background-attach {
  background-attachment: scroll !important;
  background-position: center center !important;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.wrapper > div:last-child {
  margin-bottom: 0
}
.background-wrapper:hover {
  flex-basis: 100%
}
.first:hover > .caption-header, .background-wrapper:hover > .caption-header {
  transform: translateY(0)
}
#large-image-one {
  background: url("https://farm1.staticflickr.com/727/21673476679_3f001b18fe_h.jpg") fixed 0% 50% no-repeat
}
#first {
  background: url("https://farm1.staticflickr.com/577/21675925938_e6f2cd0b97_h.jpg") fixed 20% 120% no-repeat
}
#second {
  background: url("https://farm6.staticflickr.com/5670/21852371935_04848f1034_h.jpg") fixed center top no-repeat
}
#third {
  background: url("https://farm6.staticflickr.com/5716/21861757341_08bd25c0cf_h.jpg") fixed 100% 50% no-repeat
}
#large-image-two {
  background: url("https://farm6.staticflickr.com/5826/21853275615_c96fd8849c_h.jpg") fixed 180% 20% no-repeat
}
#fourth {
  background: url("https://farm6.staticflickr.com/5793/21874899471_311e162554_h.jpg") fixed 180% 50% no-repeat
}
#fifth {
  background: url("https://farm6.staticflickr.com/5627/21835359466_d0ae74e58f_h.jpg") fixed 180% 50% no-repeat
}
#sixth {
 background: url("https://farm6.staticflickr.com/5652/21836113496_c56c3baaf8_h.jpg") fixed 180% 10% no-repeat 
}

/*$('#first').mousemove(function (e) {
    var $this = $(this);
    var $content = $this.find('.content');

    $this.css('background-position', -($this.outerHeight() -$this.outerHeight()) * ((e.clientY - $this.offset().top) / $this.outerHeight()))
    
    console.log($this.css('background-position'), e.target);
});*/
$("#turn-off").on("change", function(){
  if ($(this).prop( "checked" )) {
    $(".background-div").addClass("background-attach")
  }
  else {
     $(".background-div").removeClass("background-attach")
  }
})