[英]Change logo when scrolled to a certain div
I have 4 divs named as #jungle
, #tour
, #photography
, #culture
in my page.我的页面中有 4 个名为
#jungle
、 #tour
、 #photography
、 #culture
div。 I want to change my logo when I scrolled to certain div.当我滚动到某个 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.这意味着当我滚动丛林 div 徽标时,应更改为
jungle.png
(我使用徽标作为.navbar-brand
上的背景图像)。其他 div 徽标应相应更改。 I' using boostrap
and logo is on left top of navbar
.我使用的是
boostrap
,徽标位于navbar
左上角。
I there way to do this without using fixed heights?我有办法在不使用固定高度的情况下做到这一点吗?
I had to use logo as background image and use some jquery to make this happen.我不得不使用徽标作为背景图像并使用一些 jquery 来实现这一点。
//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和一些像这样的css
.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!.它奏效了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.