0

So I tried to change my .products whenever it was between #trigger-start and #trigger-end, I created this jQuery file but for some reason it doesn't work quite good. The alerts do work whenever I enable them tho.

jQuery

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');
    }
});

And yes the 2 divs (trigger-start --end are placed in html and styled in css)

Image to show you what I mean enter image description here

fiddle

fiddle

Niels
  • 25
  • 5

1 Answers1

1

I will add a real demo to show how you can implement your code then change your code to this 

var scrollFilter1 = $('#trigger-start').offset().top;
var scrollFilter2 = $('#trigger-end').offset().top;

var $w = $(window).scroll(function(){
    if ( $w.scrollTop() > scrollFilter1 && $w.scrollTop() < scrollFilter2 ) {  
        $('.products').addClass('bluebg');
    } else {
      $('.products').removeClass('bluebg');
    }
});
.products{
  background:red;
  position:fixed;
  width:200px;
  height:200px;
}
.bluebg{
 background:blue;
}
#sth-top{
  height:200px;
  width:400px;
    background:black;


}
#trigger-start{
    height:300px;
  width:400px;
     background:purple;
   
}
#sth-middle{
  height:200px;
  width:400px;
     background:black;
}

#trigger-end{
    height:300px;
  width:400px;
     background:purple;
}
#sth-bottom{
  height:200px;
  width:400px;
    background:black;


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="products"></div>
<div id="sth-top"></div>
<div id="trigger-start"></div>
<div id="sth-middle"></div>
<div id="trigger-end"></div>
<div id="sth-bottom"></div>

hope it works for you; You need to add your custom CSS and Class or whatever you want.

Majid
  • 2,507
  • 2
  • 19
  • 18
  • Cant check atm my host is getting ddossed but the snippet works so I guess I'll get there, thanks for ur help : ) – Niels Oct 07 '16 at 12:37
  • it's jQuery it would show the same even on your host ! it's actually working on the Browsers not host as it's javascript. Anyway if you think I can help more please let me know – Majid Oct 07 '16 at 12:44
  • ye but i had 2 adjust a few things because my file was different than I posted on this site lol : 3 but ye it worked : ) – Niels Oct 07 '16 at 14:09