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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

1412閲覧

HTML スクロールでのアクション

Hiroky

総合スコア6

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/04/26 04:12

###前提・実現したいこと

HTML製作中。jQueryにて画面スクロールに応じて動きを演出したいと思っています。

下記URLを参考に調整中
http://www.webopixel.net/lab/sample/12/0308scrollshow/pagetop-move.html

###発生している問題・エラーメッセージ

参考サイトのコードだと、一度スクロールを開始すると右下にウインドウが表示。表示されたウインドウはスクロールが一番上に戻ったときに消えます。

今回追加調整したいのは、「一番下まできたら消える。」という処理。

また、一番下まで来て消えたウインドウを、再度スクロールを上に戻したら(例えば100ピクセル戻ったとき)再表示されるようにしたいと思っています。

###該当のソースコード

<script type="text/javascript"> $(function() { var showFlug = false; var topBtn = $('#hover-window'); topBtn.css('bottom', '-200px'); var showFlug = false; $(window).scroll(function () { if ($(this).scrollTop() > 100) { if (showFlug == false) { showFlug = true; topBtn.stop().animate({'bottom' : '10px'}, 200); } } else { if (showFlug) { showFlug = false; topBtn.stop().animate({'bottom' : '-200px'}, 200); } } }); }); </script>

###試したこと

if分の書き方が不明なので調整が出来ませんので力をお借りしたいと思います。

よろしくお願いたします。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ウィンドウの高さとスクロール量を比較すれば「最下部」が判定できるのではないでしょうか。

【ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い | BlackFlag】
http://black-flag.net/jquery/20151117-5810.html

投稿2017/04/26 11:22

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問