在纯 JavaScript 中垂直滚动时水平移动元素

Question

我想在图像出现后立即将其从屏幕的最左侧移动，并且在滚动时，它应该移动到屏幕的右侧。我需要用纯 JavaScript 或 CSS 来实现这一点。

完全像这样，https://jsfiddle.net/PvVdq/除了没有 JQuery。

$(document).ready(function () {
var $horizontal = $('#horizontal');

$(window).scroll(function () {
    var s = $(this).scrollTop(),
        d = $(document).height(),
        c = $(this).height();

    scrollPercent = (s / (d - c));

    var position = (scrollPercent * ($(document).width() - $horizontal.width()));
    
    $horizontal.css({
        'left': position
    });
  });
});

Answer 1

使用 javascript 的

document

对象将帮助你实现你的目标。

您可以通过以下方式使用：

document.addEventListener("DOMContentLoaded", function() {
  var horizontal = document.getElementById('horizontal');

  window.addEventListener("scroll", function() {
    var s = window.scrollY,
      d = document.documentElement.scrollHeight,
      c = window.innerHeight;

    var scrollPercent = (s / (d - c));

    var position = scrollPercent * (document.documentElement.scrollWidth - horizontal.offsetWidth);

    horizontal.style.left = position + "px";
  });
});

#horizontal {
  position: fixed;
  width: 50px;
  background: red;
  left: 0;
  top: 50px;
}

span {
  font-size: 2em;
}

<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum! Provident similique accusantium nemo autem.
</span>

<div id="horizontal">test</div>