IEで固定スクロールした要素がチラつく(再投稿)[jQueryからJavaScriptへ書き出し]

Question

以前、IEで固定スクロールした要素がチラつくを投稿したものです。

WordPressサイトにスクロール量に応じて固定するサイドバーを追加したのですが、IEでチラつきが発生します。下記参考サイトのjQueryコードをそのまま使っています。

http://sakueji.com/stinger5-scrollad-fix/

前回回答を頂き、jQueryで書いてある下記コード

side.css({
position: pos,
top: wrapperOffset,
bottom: '',
left: sideLeft - winLeft,
margin: 0
});

こちらをJavaScriptで書きなおしたのですが、うまく動きませんでした。
そもそも全体がjQueryで囲ってあるため修正してもスクロール時に遅延が発生しているのか、自分のJavaScriptのコードが悪いのかがわかりません。

JavaScriptのコードは修正した際に消してしまったため載せられません…がどなたかアドバイスをお願い致します。

Answer 1

一応、原因究明できました。結局jQueryのタイムラグの問題のようです。
該当記事消されてしまっているので別の記事のコードから参照しましたが、

if (wrapperOffset != side.offset().top - wrapper.offset().top) {
    wrapperTop += (wrapper.offset().top - wrapperTop);
    wrapperOffset = side.offset().top - wrapper.offset().top
}

ここのwrapper.offset().top、side.offset().topの値の取得で遅延が起きています。

ですので、

var scrolladTop = document.getElementById("scrollad").offsetTop;
var asideTop = document.getElementsByTagName("aside")[0].offsetTop;
			
if (wrapperOffset != asideTop - scrolladTop) {
    wrapperTop += (scrolladTop - wrapperTop);
    wrapperOffset = side.offset().top - wrapper.offset().top
}

こんな感じでJavaScriptで直接 #scrollad と aside のoffsetTopを取って演算すれば、チラつきません。

ただ、この部分のコード、何がしたいのかよくわからず、特に必要ないようです。
ですからif文をごっそりコメントアウトしてしまってもご期待の動作になるかと思います。

Comments

[退会済みユーザー]

前回の投稿の時にリンク先を見ていればよかったのですが、
宣伝目的のリンクなどあるので見ていませんでした。
二度手間させてしまってすいませんでした。

[tk_9]

ありがとうございます！どちらの方法でもスクロールのチラつきを防ぐことが出来ました！
javascript, jQuery等の知識を改めて付けないといけないと実感しました。二度も回答していただきありがとうございました。

補足：該当記事は私のリンク設定ミスで404エラーになっていたため修正しておきました。

Answer 2

「ちらつく」ってこういう意味ですか。言葉だけでは伝わらないものですね。
これはjQueryのタイムラグの問題じゃないです。

プログラムのバグっぽいので時間があったら明日見てみますが、
他の人が回答くれるかもしれません。

Comments

[tk_9]

回答ありがとうございます。
実際に構築しているサイトが下記になります。
http://vdeep.net

Chromeではしっかり固定されるのですが、IEではスクロールする度に表示、非表示を繰り返します。
もし検討していただければ幸いです。

[tk_9]

[追記]
以前回答を投稿していただいたlucker様だと気づきませんでした。再びの回答ありがとうございます。
私もどこに以上があるかコードを追ってみていこうと思います。…といってもあまりjQuery等詳しくないので解決出来るかわかりませんが…よろしくお願い致します。