javascript - 滚动事件的 JS/CSS 解决方案，兼容移动 Safari

Question

在许多网络应用程序中，我经常需要 JS 和/或 CSS 解决方案，以便当用户在页面上向下/向上滚动时可以(增量)更改对象上的 CSS 值。

http://codepen.io/bsley/pen/gGyhm

function EasyPeasyParallax() {
  var scrollPos = $(document).scrollTop();
    $('.header').css({ 'opacity': 1-(Math.min(scrollPos/70,1)) });
};

$(document).ready(function() {
    $('body').bind('mousewheel', EasyPeasyParallax);
});

上述代码存在两个问题。

1. 它只允许我根据 PX 变量控制数学，而不是相对于屏幕高度或宽度的任何百分比。这对于不同的屏幕尺寸很重要。

2. 它与 Mobile Safari 根本不兼容。

关于如何实现相同目标但满足上述两点的任何帮助？

Answer 1

要解决您的移动 Safari 问题，请绑定(bind)到 scroll 事件，而不是 mousewheel。

$(document).ready(function() {
  $('window').bind('scroll', EasyPeasyParallax);
});

就百分比而言，您必须使用其他一些值自行计算。

function EasyPeasyParallax() {
  var scrollPos = $(document).scrollTop(),
      bodyHeight = $('body').height(),
      viewportHeight = $('window').height(),
      scrollPercentage = (scrollPos / bodyHeight) * 100;
  $('.header').css({ 'opacity': 1-(Math.min(scrollPos/70,1)) });
};