这是我的html和css代码段:
If objCollection(i).Type = "button" And objCollection(i).Value = "Next 40" Then
.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;
}
我想要实现的是在用户向下滚动时将云移动到网站边缘。我的云是一个图像精灵,每个云绝对定位。抱歉,我是网络开发的新手,仍然需要学习很多东西。
答案 0 :(得分:0)
我认为这最好通过Javascript实现。通过使用JQuery,这不应该太难。
首先检查您的滚动距离:
var scrollPercent = 100 * $('body').scrollTop() / ($('body).height()
它为您提供了向下滚动的百分比。然后,您可以执行以下操作:
$('.cloud-1').css('left', (200 / scrollPercent) + 'px');
如果用户在页面下方,则会在开始时从左侧设置图像200 px
,向左设置2 px
。
在scroll上更新这些值:
$('body').on('scroll', function(){
// methods described above here
}
<强> 注释 强>
代码未经过测试,正朝着正确的方向前进。根据您的需求进行调整,并查看jquery文档。
答案 1 :(得分:0)
你的代码片段对我不起作用(因为你使用了图片的相对路径......)但你应该这样做(用用户必须滚动的高度替换高度)
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
}