Question

我已经获得了一些Jquery代码的帮助，以便在我向下滚动页面时动态更改图像3次。下面的代码按原样运行，但我猜您理解依赖像素并不是一件好事，因为不同的屏幕有不同的分辨率。

因此，我想改变......

(pos > 2900 && pos < 3900)

更像是......

(scrollPercent > 25% && scrollPercent < 35%)

这样过渡在每个屏幕上都完全相同。

window.onload = function(){
$("#package1").fadeIn(500);
$(document).scroll(function() {
  var pos = $(document).scrollTop();
  if (pos < 2900) {
    hideAll("package1");
    $("#package1").fadeIn(500);
  }
  if (pos > 2900 && pos < 3900) {
    hideAll("package2");
    $("#package2").fadeIn(500);
  }
    if (pos > 3900 && pos < 5000) {
    hideAll("package3");
    $("#package3").fadeIn(500);
  }
});

function hideAll(exceptMe) {
  $(".package").each(function(i) {
    if ($(this).attr("id") == exceptMe) return;
    $(this).fadeOut(1000);
  });
}}

有任何想法的人吗？

供参考，我的工作进度页面：http://www.johnmorganstudios.se/client-sevn/

Answer 1

此时我可以为您推荐的是：

var h =document.body.clientHeight;
var i=h/2;
window.scrollBy(0, i);

注意：/2表示50%，/5表示20%等。

所以在你的情况下它会是这样的：

var h=document.body.clientHeight;
var i=h/4, o=h/2.85; // 25% as you said. and o which is gonna be 35%

window.onload = function(){
$("#package1").fadeIn(500);
$(document).scroll(function() {
  var pos = $(document).scrollTop();
  if (pos < i) {
    hideAll("package1");
    $("#package1").fadeIn(500);
}
  if (pos > i && pos < o) {
    hideAll("package2");
    $("#package2").fadeIn(500);
  }
    if (pos > o && pos < 5000) {
    hideAll("package3");
    $("#package3").fadeIn(500);
  }
});

function hideAll(exceptMe) {
  $(".package").each(function(i) {
    if ($(this).attr("id") == exceptMe) return;
    $(this).fadeOut(1000);
  });
}}

注意：我已将所有2900替换为25%，将3900替换为35%。

祝你好运：）

通过滚动百分比而不是滚动像素来更改图像

1 个答案: