特定スクロール区間のみにcssスタイルを適用したい

JQueryについてご質問です。

ある要素に特定スクロール区間のみcssスタイルを適用したいです。

具体的には、

lang
1<div class="hoge">

を縦スクロール300px〜1200pxの区間のみ

lang
1<div class="hoge" style="position:fixed;">

としたいです。

対応ブラウザはIE7+です。

方法をご教授願えればと思います。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じでどうでしょうか

lang
1$(window).scroll(function () {
2  var scrollTop = $(window).scrollTop();
3  if( 300 < scrollTop && scrollTop < 1200 ){
4    $('#hoge').css('position','fixed');
5  }else{
6    $('#hoge').css('position','static');
7  }
8});

投稿2015/04/11 05:37

Lhankor_Mhy

総合スコア36104

castail

2015/04/11 08:10

ご回答ありがとうございます。こちらを試したのですが、動作しませんでした。

Lhankor_Mhy

2015/04/11 11:44

そうですか、それは残念。当方では動作したのですが。でも、方法はご理解いただけたと思いますので、修正して使っていただければと思います。

castail

2015/04/11 16:15

そちらではうまく動作されたのですね。。。他プログラムとの干渉かと思い下記最低限の構成でテストのhtmlを生成してもうまく行きませんでした。 ```lang-＜html＞ <!doctype html> <html> <head> <meta charset="UTF-8"> </head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(window).scroll(function () { var scrollTop = $(window).scrollTop(); if( 300 < scrollTop && scrollTop < 1200 ){ $('#hoge').css('position','fixed'); }else{ $('#hoge').css('position','static'); } }); </script> <body> <div style="height:1000px; position:relative;"></div> <div id="hoge">hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。hogeエリアです。</div> <div style="height:1000px; position:relative;"></div> </body> </html> 何かお気づきの点があればご教授下さい。

Lhankor_Mhy

2015/04/13 02:57

申しわけないのですが、当方ではご提示のコードで動作しています（スクリーンサイズの関係でdivのheightを変更させていただきましたが）。 IE7もエミュレートですが動作しています。ひょっとすると、エミュレーションではない実機のIE7だと動作しないのかもしれません。すみませんが、当方にはその環境がありませんので確認いたしかねます。よろしくお願いします。

castail

2015/04/13 13:03

大変失礼しました。確かにこのミニマム構成動作しました。しかし本環境では動作しませんでした。おそらく他の併用しているスクリプトが干渉しているのかと思います。引き続き調べたいと思います。

行動規範の内容に同意します