改变滚动的顶部值

jQuery Change top value on scroll

本文关键字:顶部 滚动 改变      更新时间:2023-09-26

我希望在页面下方的"为20多岁的人设计"部分创建一个类似的效果。效果基本上是获得一个长图像来改变设备(如MacBook或iPhone)内的css top值,因此当用户滚动网站时,设备内的图像似乎也在滚动。

我已经创建了一个小提琴来显示我已经完成了多少,但是这在调整大小或初始加载时不太好用。

这是我在 下面使用的一些代码
var yOffset =  $element.offset().top - ($(document).scrollTop() + $(window).height()/diviser)

我现在看到了。但这个动作太微妙了,我都没注意到。看起来要为一个几乎不引人注意的东西做很多工作。看起来他是在根据整个窗口滚动的百分比变化来改变图像的顶部位置,但只有当图像在视窗内时。

就在我的脑海里(完全未经测试),像这样的东西会滚动图像和1/4的速度窗口将滚动;

var mobiletop = $('.mobile').position().top;
var scrollfactor = 4;
$(window).scroll(function(){
    if($(window).scrollTop() > mobiletop){
        var imgtop = $('.mobile img').position().top -  (($(window).scrollTop() - mobiletop)/scrollfactor);
        $('.mobile img').css('top', imgtop + 'px');
}