質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • JavaScript

    16960questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6915questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,000

castail

score 117

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

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

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

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

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

ご教授のほどよろしくお願い致します。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/04 12:09

    >まず、windowはメソッドではなくオブジェクトです。

    大変失礼いたしました。理解不足でお恥ずかしい限りです。。。

    -

    >windowを書き換えててしまっているとか、使うなと言われている、もしくはそういう課題制約とか?
    >差し支えなければwindowが使えない理由を補足してもらえれば・・

    説明足らずで申し訳ございません。
    こちらも詳細は把握していないのですが、今回は改修案件で既にあるJSとの兼ね合いの問題で「window」の使用が不可という事のようです。

    -

    >setIntervalで定期的に現在のスクロール位置をとって所定の高さで発動させるという方法

    「setInterval」での方法は確かに検討していました。この方法でスクロール位置判別での表示・非表示は可能なのでしょうか?是非ともご教授頂きたいです!

    キャンセル

  • 2015/09/04 14:09 編集

    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)は大丈夫ですよね?

    キャンセル

  • 2015/09/14 10:47

    _Hiroshi_様

    ご回答ありがとうございます。

    ご連絡が遅くなり大変申し訳ございません。

    ご教授頂いた内容で実現できました!
    この度は誠にありがとうございました。

    キャンセル

関連した質問

  • 解決済

    CSSで親要素の幅に合わせ背景画像を拡大させる方法

    まず現状のコードを見てください。※単体で動作するようにしました。 ・親divが画面幅に応じて変化する ・子divは背景画像のサイズに合わせ縦横のサイズを指定している ・子divの縦

  • 解決済

    window.open を使わずにpopupする方法

    window.open を使わずにpopup画面を表示し、 その中でボタンを押したりしたい div 要素を動的に変えて、モーダルで・・・ という方法があるようですが、 元の画面

  • 解決済

    コンテンツの作成方法

    下記参考サイトの様に、 画像をマウスオーバーすると、 キャプションが現れるコンテンツを作成したいと考えております。 【 参考サイトURL 】 http://www.basicag

  • 受付中

    【緊急】画像やdivの配置方法に関して

    下記コードの様にHTMLを書いた際に コンテンツ同士が重なってしまい、 綺麗に縦に並べる事が出来ません。 また上のグレーのコンテンツに関しては、 横幅を100%で高さはウィンドウ

  • 受付中

    画像の配置に関して

    こちらの複数の様々なサイズの画像同士の隙間を 均等にしつつ、尚且つ画像やテーブルはウィンドウサイズによって 可変する様に作成したいと考えておりますが、 どのように作成すればいいかが

  • 解決済

    画像上に文字を乗せるとき良い方法を教えてください

    <img src="./img/top.png" alt="topimg">       <span style="position: absolute; top: 80px; l

  • 解決済

    htmlで中央揃えしたフォームの左に文字列を入れたい

    初歩的な質問失礼します。 画面の真ん中に入力フォームを置き、そのすぐ左に文字列を入れたいと考えています。 フォームの位置は真ん中で固定させ、文字列は長さに応じて左方向に伸びていく

  • 解決済

    [JS・CSS3]特定位置スクロール時に固定出現させたい

    ある要素(.hoge)を特定位置("X"px)までスクロールしたらページ下部に固定出現させたいです。 下記JavaScriptコードを使わずに実現する方法をご教授ください。 css

同じタグがついた質問を見る

  • JavaScript

    16960questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6915questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。