移动对象时，将水平滚动文本与垂直滚动文本同步

Question

我正试图用jQuery让文本从右向左滚动，但用垂直滚动条，你能帮我吗？当我尝试我的代码时，它可以工作，但它也会使对象水平移动

var $sun = $('.sun');
var $win = $(window);
$win.on('scroll', function() {
var top = $win.scrollTop();
$sun.css("transform", `translateX(${top}px)`);
});

body {
width: 1277px;
height: 148px;
overflow-x: hidden;
}
container {
width: 600px;
height: 50px;
overflow-x: hidden;
}
.sun {
display: block;
width: 600px;
height: 50px;
margin: 75vw 0vh;
overflow-x: hidden;
}

<div id="container">
<h1 class="sun">test</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

由于使用了translateX()，内容正在水平移动。我假设在这个问题中，你的意思是内容正在垂直移动，而你不希望它这样做。

在这种情况下，您可以在.sun元素上使用position: fixed，使其相对于窗口而不是文档定位，然后translateX()逻辑将在页面向下滚动时水平移动它。试试这个：

var $sun = $('.sun');
var $win = $(window);
$win.on('scroll', function() {
var top = $win.scrollTop();
$sun.css("transform", `translateX(${top}px)`);
});

body {
width: 1277px;
height: 1148px;
overflow-x: hidden;
}
.sun {
display: block;
width: 600px;
height: 50px;
overflow-x: hidden;
position: fixed;
top: 10px;
left: 10px;
}

<div id="container">
<h1 class="sun">test</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>