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?

Yes please. we can do that! But we need some code to work on. What have you tried?? — Guruprasad J Rao, Jun 11 '15 at 05:13
var t = $("#jungle").offset().top; $(document).scroll(function(){ if($(this).scrollTop() > t) { $('.navbar-brand').css({"background":"url(images/jungle.png)"}); } }); — Sasith, Jun 11 '15 at 05:15
paste your html + javascript + css code, it would be very helpful if you paste it in fiddle and provide us the link. — Newinjava, Jun 11 '15 at 05:17
I used that code but image change before reach the div and doesn't change back after scrolled out of div. — Sasith, Jun 11 '15 at 05:18
You can either use some libraries like `jQuery.waypoints` or write simple `$(window).resize` handler. Read this article: http://stackoverflow.com/questions/18495070/change-background-image-of-element-5-times-on-scroll-down — Yeldar Kurmangaliyev, Jun 11 '15 at 05:19
satish i suggest you to put the code from your comments to the question — Sourabh Kumar Sharma, Jun 11 '15 at 05:20

Sasith · Accepted Answer · 2016-09-27T07:42:36.950

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!.

Change logo when scrolled to a certain div

1 Answers1