如何在鼠标滚动上移动元素？
如何在鼠标滚动上移动元素？
提问于 2016-06-02 18:34:46
下面是我的html和css代码片段：
.clouds {
background-image: url('http://placehold.it/1200x1200');
background-repeat: no-repeat;
display: block;
}
.cloud-1 {
width: 138px;
height: 83px;
position: absolute;
left: 200px;
top: 350px;
}
.cloud-2 {
width: 100px;
height: 52px;
position: absolute;
left: 625px;
top: 400px;
background-position: -935px -9px;
}
.cloud-3 {
width: 110px;
height: 58px;
position: absolute;
left: 450px;
top: 350px;
background-position: -1033px -6px;
}<div id="animations">
<div class="clouds cloud-1"></div>
<div class="clouds cloud-2"></div>
<div class="clouds cloud-3"></div>
<div class="clouds cloud-4"></div>
<div class="clouds cloud-5"></div>
<div class="clouds cloud-6"></div>
<div class="clouds cloud-7"></div>
<div class="clouds cloud-8"></div>
<div class="clouds cloud-9"></div>
<div class="clouds cloud-10"></div>
<div class="clouds cloud-11"></div>
<div class="clouds cloud-12"></div>
<div class="clouds cloud-13"></div>
</div>
我想要实现的是当用户向下滚动时将云移动到网站边缘。我的云是一个图像精灵，每个云都是绝对定位的。很抱歉，我是一个新手，我还需要学习很多东西。
回答 2
Stack Overflow用户
发布于 2016-06-02 18:54:49
我认为这最好是通过Javascript来实现的。通过使用JQuery，这应该不会太难。
首先，检查您的滚动距离：
var scrollPercent = 100 * $('body').scrollTop() / ($('body).height()这就给出了您向下滚动的百分比。然后，您可以执行以下操作：
$('.cloud-1').css('left', (200 / scrollPercent) + 'px');这将设置图像200 px，如果用户在页面下方，则从开始的左侧到左侧的2 px。
在滚动时更新这些值：
$('body').on('scroll', function(){
// methods described above here
}笔记
代码没有经过测试，这是一个正确的方向。根据您的需要进行调整，并查看jquery文档。
Stack Overflow用户
发布于 2016-06-02 18:57:12
您的代码片段对我不起作用(因为您使用了图像的相对路径...)但是你可能应该这样做(用用户必须滚动的高度替换高度)
JQuery：
$(window).scroll(function() {
var scr = $(window).scrollTop();
var height = 300px;
if(scr > height) {
$(document.body).addClass('fix-clouds'); /* add the class on scroll */
} else {
$(document.body).removeClass('fix-clouds'); /* remove when we go back to top */
}
});CSS：
.fix-clouds clouds {
your CSS
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37589382
复制相关文章
相似问题
腾讯云开发者
