background-attachment:fixedと同様の効果をjQueryで実装したい

Question

class="over-width"という要素に背景画像を指定し、background-attachment:fixedで擬似パララックスっぽい効果を実装しました。

しかし、iOS Safari等でbackground-attachment:fixedが効かないということで、jQueryでbackground-positionの値を変化させて同等の効果を実装したいと考えています。
（Wordpressの記事内で汎用的に使う部分のため、次のような実装は、今回は望ましくありません。 http://qiita.com/volkuwabara/items/bedaf09244f5cdebb228 ）

.over-widthの上辺がwindowの中に入ってから出るまでの間、
windowの下辺を0%、上辺を100%と考えて、パーセンテージで取得するようにし、
その値を、background-position: 50% X;といった感じで代入する。

というイメージです。

ご教授のほど、宜しくお願い致します。

Answer 1

ご質問に書いてらっしゃるイメージでコードは書かれてみましたか？
書かれたのであればどのようなコードで、どのように上手くいかないか、などの質問のほうが好意的な回答を得やすいでしょう。

考え方だけ書いておきます。
基本として、擬似的といえども、実際のパララックスを作成するのと同じ処理が必要になります。
そのため、多分思ってらっしゃるより様々な処理が必要なので、ボリューミーで面倒なコードを書く必要があります。

• 対象要素の位置（offset().top）を取得
• 対象要素の高さ(outerHight)を取得
• 現在の位置（scrollTopからの位置）を取得
• 現在の位置と対象要素の位置を比較 -> イベントスタート判定＋終了判定
• （イベントスタート時の分岐で）対象のスクロール量用の変数を用意（現在位置を取得している変数に対してスピード調整等を加える＋αした値を代入）
• （イベント中常時）対象要素に対して.css({'backgroundPosition': 対象のスクロール量用の変数 })を指定

というのがオーソドックスな作成の方法です。

windowの下辺を0%、上辺を100%と考えて、パーセンテージで取得するように

これが何のために必要なのかはちょっと分からないですが、多分いらないです。

対象要素の高さ（長さ）によって背景画像の移動が…とお考えかもしれませんが、スクロール量と移動量が同じなら、普通にスクロール量を代入すればそのように動きます。
（ただし、背景画像の高さを対象要素の高さより大きくする必要がある＝モバイルではスクロール開始時とイベントスタートにタイムラグがあるため、高さが同じなら上下が欠けて見えるタイミングが生まれる）

PCであれば$(window).on('scroll',fun)イベントで行えば良いですが、
モバイルではごく最近のOS（今年の春以降のバージョン）以外はまともに動きません。
そのため、多くの場合iScrollプラグイン等を使用して（これを使わないと恐ろしく面倒な処理を自前で実装する必要があります※ただしプラグインの中身をちょっといじった上で使用する必要もあったりましす）、wrap要素を作り、ブラウザデフォルトのスクロールイベントをキャンセルした上で、そこに対してのtouchmoveイベントを取得して処理する方法を取ります。（今回のケースでは開始位置を工夫する必要もあります）

---

実用レベルにしようと思うと、まだいくつか留意しなければならない重要なポイントがあるのですが
「やめておいたほうがいい」と言っているように見えるかもしれないので、
まずはこのレベルのものが作成できるように頑張ってみてください！