背景画像を止める ということをすると変な挙動を起こす。
スクロールするたびガタガタしてとても見づらい
というよりは見れない
Win8.0までは大丈夫だったのに・・・。
ということでかなりの苦労をしてなんとか正常に動くようにコーディング完了
なにをやったかというと
背景画像以外はちゃんと動くのだから
他の動いているものと同じ扱いにしてあげよう
ってことでやってみたら
バッチし
この考えを導き出すまでに かなり苦労しました。
ま、私が閃いたんじゃなくて
ある人の一言がヒントになったんですけどね。
同じように困っている方がいましたら参考までに
あまり背景画像を止めることをするような案件は無いと思いますが。
style.css
#content {/*背景画像を設定したい範囲を囲むdiv ここに背景画像設定したいが我慢*/
width: 980px;
margin: 0 auto;
position: relative;
position: relative;
}
#content-inner {
width: 980px;
height: 1800px;/*背景画像の大きさ*/
background:url(image/****.png) no-repeat ;/*ここに背景画像設定*/
position: absolute;
top: 0px;
}
html
html
<div id="content" data-0="height:5000px;"><!--スクロール量分長くなるのでそれに合わせてheight変更-->
<div id="content-inner" data-0="top:0px;position:relative;"
ここが重要
data-600="top:41px;position:fixed;"
data-2750="top:41px;"スクロール量2750までtopを同じにして固定
***********
<div id="content-inner" data-0="top:0px;position:relative;"
ここが重要data-600="top:41px;position:fixed;"
data-2750="top:41px;"
スクロール量2750までtopを同じにして固定***********
</div>
</div>
パララックスjQueryはskrollrを使いました。
IE用のskrollrは必要ありませんでした。
以上です。
</div>
パララックスjQueryはskrollrを使いました。
IE用のskrollrは必要ありませんでした。
以上です。