如何在鼠标滚动上移动元素?

时间:2016-06-02 10:34:46

标签: javascript jquery html css

这是我的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;
}

我想要实现的是在用户向下滚动时将云移动到网站边缘。我的云是一个图像精灵,每个云绝对定位。抱歉,我是网络开发的新手,仍然需要学习很多东西。

2 个答案:

答案 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
}