Question

我的页面中有4个名为#jungle，#tour，#photography，#culture的div。当我滚动到某个div时，我想更改我的徽标。这意味着当我滚动丛林div徽标应该更改为jungle.png（我在.navbar-brand上使用徽标作为背景图像）。在其他div上徽标应相应更改。我使用boostrap，徽标位于navbar的左上角。

我有办法在不使用固定高度的情况下做到这一点吗？

Answer 1

我不得不使用徽标作为背景图片并使用一些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{}
   });

和某些像这样的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;}

它有效！

滚动到某个div时更改徽标

1 个答案: