javascript - 滚动到某个 div 时更改 Logo

Question

我的目录中有 4 个名为 #jungle、#tour、#photography、#culture 的 div页。当我滚动到某个 div 时，我想更改我的 Logo 。 这意味着当我滚动丛林 div Logo 时应更改为 jungle.png (我在 .navbar-brand 上使用 Logo 作为背景图像)。在其他 div 上 Logo 应更改因此。 我使用 boostrap， Logo 位于导航栏 的左上角。

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

Answer 1

我必须使用 Logo 作为背景图像并使用一些 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;}

它成功了!