Change logo when scrolled to a certain div

Question

I have 4 divs named as #jungle, #tour, #photography, #culture in my page. I want to change my logo when I scrolled to certain div. That mean when I scrolled jungle div logo should change to jungle.png (I'm using logo as background image on .navbar-brand).On other divs logo should change accordingly. I' using boostrap and logo is on left top of navbar.

I there way to do this without using fixed heights?

Answer 1

I had to use logo as background image and use some jquery to make this happen.

//change logo on activities panel

 $(document).scroll(function(){
   var h = $(".nav").height() * 1.5;
   var t1 = $("#water").offset().top;
    if(($(this).scrollTop() + h) >= t1)
    {   
       $('.navbar-brand').css({"background":"url(images/logo2.png)"});

     }
     else{}
 });

$(document).scroll(function(){
var h = $(".nav").height() * 1.5;
var t2 = $("#jungle").offset().top;
if($(this).scrollTop() + h >= t2)
{   
 $('.navbar-brand').css({"background":"url(images/logo3.png)"});

}
else{}
   });

and some css like this

.navbar-brand {
padding-top: 0;
background: url(../images/logo.png);
background-position: center;
background-repeat: no-repeat;
width: 146px;
height: 67px;
transition: all .1s;}

and it worked!.