How to move svg chart on mouse scroll with D3.js

Question

I have two charts; bar chart and word cloud.

I would like word cloud to move down as I scroll down. Any ideas/examples on how to achieve this with D3.js / JavaScript?

Here is my DEMO (You should launch the preview in separate window).

Thanks!

Answer 1

You can control the positioning of a DOM element through a window event listener like this:

  window.addEventListener("scroll", myFunc.bind(this, document.getElementById("scroller")), false);

  function myFunc(div) {
      var scroll = document.body.scrollTop;
      div.style.top = (scroll / 10)+"px";
  };

So for every ten pixels the user scrolls, the scroller element will move one pixel.

http://jsfiddle.net/76vd9h3g/

Cross browser implementation of scrollTop here