滚动到某个 div 时更改徽标答案

【问题标题】：Change logo when scrolled to a certain div滚动到某个 div 时更改徽标
【发布时间】：2016-09-27 15:42:36
【问题描述】：

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

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

【问题讨论】：

请。我们能做到这一点！但是我们需要一些代码来处理。你试过什么？？
var t = $("#jungle").offset().top; $(document).scroll(function(){ if($(this).scrollTop() > t) { $('.navbar-brand').css({"background":"url(images/jungle.png )"}); } });
粘贴您的 html + javascript + css 代码，如果您将其粘贴到 fiddle 中并提供链接将非常有帮助。
我使用了该代码，但图像在到达 div 之前发生了变化，并且在滚动出 div 后不会变回来。
您可以使用一些库，如jQuery.waypoints 或编写简单的$(window).resize 处理程序。阅读这篇文章：stackoverflow.com/questions/18495070/…

标签： javascript jquery html twitter-bootstrap scroll

【解决方案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;}

它成功了！

【讨论】：