products opacity

change css whenever between 2 divs

HTML

<div class="products">.products</div>
<div class="content">content part1</div>
<div id="trigger-start">^Trigger-start, so it should change the opacity after reaching this^</div>
<div class="content">content part2</div>
<div id="trigger-end">^Trigger-end, so it should change the opacity back to normal after reaching this^</div>
<div class="content">content part3</div>

CSS

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.products {
  position: fixed;
  height: 80px;
  width: 150px;
  background-color: turquoise;
  opacity: 1;
  margin: 0 auto;
  left: 0;
  right: 0;
  margin-top: 250px;
}

#trigger-start, #trigger-end {
  width: 100%;
  height: 20px;
  background-color: lightblue;
  text-align: center;
}

.content {
  width: 100%;
  min-height: 1200px;
  background-color: lightgray;
}

JavaScript

$(document).ready(function () {

  var scrollFilter1 = $('#trigger-start').offset().top;
  var scrollFilter2 = $('#trigger-end').offset().top;
  var windowPosY = $(this).scrollTop();
  $(window).scroll(function(){
    if(windowPosY >= scrollFilter1 & windowPosY <= scrollFilter2){
      //alert('yey');
      $('.products').css('opacity','0.6');
    } else {
      //alert('ney');
      $('.products').css('opacity','1');
    }
  });
});