Change image when scrolled to a certain div

Question

I added the logo as a background-image and I have 4 divs (#home, #about, #projects, #contact). Now I want to change the logo when the page is scrolled to a certain div, e.g.: when scrolled to #about the logo should change to logo-dark.png and the width should be reduced to 50px. How can I do this?

<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>

Here's the 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;
}

Could you post all of your code? It's not clear what you're asking here. — stjns, Mar 16 '16 at 19:41
I think this could help you... [onScreen](http://benpickles.github.io/onScreen/)... — Harish Elumalai, Mar 16 '16 at 19:45

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

I recommend looking into Javascript to achieve your goal. For example, if you were going to utilize jquery, I would write something similar to this

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

This is a very rough example, because there's only so much that you've given to your code. You'll also have to tailor it to your specific scroll needs. I believe these may be able to help you: Jquery how to trigger click event on href element , https://api.jquery.com/click/

edited May 23 '17 at 10:28

Community

1
1

answered Mar 16 '16 at 20:11

Mary Kelly

56
5

OP is asking to trigger at a page location during scroll, not on-click – Adam Buchanan Smith Mar 16 '16 at 20:13
1

Gotcha. I believe I read it wrong/didn't understand at first. You got it though, in your answer. – Mary Kelly Mar 16 '16 at 20:17
Thanks, I appreciate it – Mary Kelly Mar 16 '16 at 20:36

Adam Buchanan Smith · Accepted Answer · 2016-03-16T21:49:45.050

I think this is what you want, see fiddle: https://jsfiddle.net/DIRTY_SMITH/eu6x72zf/1/

HTML example:

<div id="img1">


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

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

CSS example:

#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;
}

And the 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/')"
      });
    }
  });

Change image when scrolled to a certain div

2 Answers2