特定要素が画面内に表示されたら別要素にstyle属性を追加したい

特定要素が画面内に表示されたら別要素にstyle属性を追加したいです。

具体的構成は下記のとおりです。

lang
1<body>
2・
3・
4・
5・
6<div class="target"></div>
7<div class="fixnavi"></div>
8</body>

lang
1.fixnavi {
2	position:absolute;
3	width:100%;
4	height:100px;
5	left:0;
6	bottom:-100px;
7	}

.targetが画面内に表示されたら、.fixnaviのstyle属性に"bottom:0;"を追加したいです。
アニメーションで出現できたら嬉しいです。
可能であれば、
(1).targetが一度読み込まれたら再度画面外に出ても.fixnaviのstyleはそのままの場合と、
(2).targetの画面内への出入りに合わせて.fixnaviのstyleも追加・削除される場合の2パターンをご教授願えればと思います。

本来は「$(window).scroll」イベントでの特定位置スクロール時に表示されるフロートメニューを実装したかったのですが、環境の仕様上「window」メソッドが使用できないため代替案として上記仕様を思い立ちました。

もし、「window」メソッドを使用せずフロートメニュー出現が実現できる方法がございましたら、その方法でも結構です。

ご教授のほどよろしくお願い致します。

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

回答1件

ベストアンサー

環境の仕様上「window」メソッドが使用できない

まず、windowはメソッドではなくオブジェクトです。
そしてwindowはブラウザで動作するjavascriptにおけるオブジェクトの親のようなものなので
使用できないというのはなにか変です。
windowを書き換えててしまっているとか、使うなと言われている、もしくはそういう課題制約とか？
差し支えなければwindowが使えない理由を補足してもらえれば・・

ともあれ
一定のところまでスクロールしたらフワっとでてくるメニューを作りたいんですよね？
普通は書かれているとおりスクロールイベントを使います。
それが適わないなら、setIntervalで定期的に現在のスクロール位置をとって所定の高さで発動させる
という方法が考えつきましたが、あまり良い方法ではないです。

やはりスクロールイベントを使う方がいいでしょう。

投稿2015/09/04 02:53

_Hiroshi_

総合スコア29

castail

2015/09/04 03:09

>まず、windowはメソッドではなくオブジェクトです。大変失礼いたしました。理解不足でお恥ずかしい限りです。。。 - >windowを書き換えててしまっているとか、使うなと言われている、もしくはそういう課題制約とか？ >差し支えなければwindowが使えない理由を補足してもらえれば・・説明足らずで申し訳ございません。こちらも詳細は把握していないのですが、今回は改修案件で既にあるJSとの兼ね合いの問題で「window」の使用が不可という事のようです。 - >setIntervalで定期的に現在のスクロール位置をとって所定の高さで発動させるという方法「setInterval」での方法は確かに検討していました。この方法でスクロール位置判別での表示・非表示は可能なのでしょうか？是非ともご教授頂きたいです！

_Hiroshi_

2015/09/04 10:08 編集

setIntervalでも可能です。 var targetTop = $('div.target').offset().top, $doc = $(document), $navi = $('div.fixnavi'); setInterval(function () { if (targetTop < $doc.scrollTop()) { if (!$navi.hasClass('shown')) { $navi.removeClass('hidden').addClass('shown').animate({bottom: '0px'}, 200); } } else { if (!$navi.hasClass('hidden')) { $navi.removeClass('shown').addClass('hidden').animate({bottom: '-100px'}, 200); } } }, 50); div.targetがスクロールによって画面から消えたら出てきます。 shownやhiddenはinterval中、animateが走りまくるのを防ぎます。 $(document)は大丈夫ですよね？

castail

2015/09/14 01:47

_Hiroshi_様ご回答ありがとうございます。ご連絡が遅くなり大変申し訳ございません。ご教授頂いた内容で実現できました！この度は誠にありがとうございました。

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