Question

我添加了徽标作为背景图片，我有4个div（＃home，＃about，＃project，＃contact）。现在我想在页面滚动到某个div时更改徽标，例如：当滚动到 #about 时，徽标应更改为 logo-dark.png 和宽度应减少到 50px 。我怎么能这样做？

<div class="logo">
    <a href="#home"> </a>
</div>

<div class="content">
    <div id="home">
    </div>
    <div id="about">
    </div>
    <div id="projects">
    </div>
    <div id="contact">
    </div>
</div>

这里是CSS：

.logo {
    position: absolute;
    height: 65px;
    width: 230px;
    top: 25px;
    left: 0;
}

.logo a{
    background: url('../images/logo.png');
    display: block;
    height: inherit;
    width: inherit;
}

Answer 1

我建议您查看Javascript以实现目标。例如，如果您打算使用jquery，我会写一些与此类似的东西

$( "#example" ).click(function() {
  $(".logo").css("background":"url(../pathway/logo.png", "width": "50px");
});

这是一个非常粗略的例子，因为您的代码只有这么多。您还必须根据您的特定滚动需求定制它。我相信这些可以帮到你：Jquery how to trigger click event on href element， https://api.jquery.com/click/

Answer 2

我认为这就是你想要的，请看小提琴：https://jsfiddle.net/DIRTY_SMITH/eu6x72zf/1/

HTML示例：

<div id="img1">


</div>
<div class="placeholder">

</div>
<a id="anchor-point">scroll to here</a>

CSS示例：

#img1 {
  background-image: url("http://lorempixel.com/400/200/");
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

.placeholder {
  height: 900px;
  width: 100%;
  background-color: lightblue;
}

和javascript：

  var targetOffset = $("#anchor-point").offset().top;

  var $w = $(window).scroll(function() {
    if (($w.scrollTop() + $(window).height()) > targetOffset) {
      $('#img1').css({
        "background-image": "url('http://lorempixel.com/400/200/sports/1/')"
      });
    } else {
      $('#img1').css({
        "background-image": "url('http://lorempixel.com/400/200/')"
      });
    }
  });

滚动到某个div时更改图像

2 个答案: