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

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

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

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

jQuery

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

Q&A

解決済

1回答

2032閲覧

スクロール量に合わせて、要素を表示、非表示させたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2019/09/10 12:56

編集2019/09/10 12:58

やりたい事

まずこちらがコードです

jQuery

1$(function(){ 2 3 $(window).on('scroll touchnmove', function() { 4 var $scroll = $(window).scrollTop(), 5 $about = $('.about'), 6 $aboutTop = $about.offset().top, 7 $aboutHeight = $about.height(), 8 $aboutBottom = $aboutTop + $aboutHeight, 9 $btn = $('.btn-wrapper'); 10 11 if ($scroll > $aboutTop) { 12 $btn.fadeIn(1000); 13 } else { 14 $btn.fadeOut(500); 15 } 16 if ($aboutBottom < ($scroll * 1.1)) { 17 $btn.hide(); 18 } 19 20}); 21コード

html

1<section class="about"> 2 <div class="btn-wrapper"> 3 <span class="btn">ボタン</span> 4 </div> 5</section> 6<section class="works"> 7</section> 8コード

css

1 .btn-wrapper { 2 display: none; 3 } 4 5 .btn { 6 position: fixed; 7 bottom: 0; 8 left: 0; 9 display: inline-block; 10 padding: 1rem 3rem; 11 width: 100vw; 12 font-size: 2rem; 13 font-weight: 600; 14 background: red; 15 color: #fff; 16 z-index: -1; 17 } 18 19コード

.aboutまでスクロールしたらfadeInする(それまでは非表示)

.aboutから下にスクロールしたらfadeOutする(実際は.aboutの下より少し上でfadeOutする)

.worksまでスクロールしたらまたfadeInする(ここの要素はhtmlメソッドで追加)
のようにしたいのですが、

if ($aboutBottom < ($scroll * 1.1)) { $btn.fadeOut(500); } コード

の条件式を追加すると、
一度はfadeOutするのですが、その後にまたfadeInします。
条件式の書き方が悪くてこのような動作になっているのは分かるのですが、
恥ずかしながらどう書けばいいか分かりません。

どのようにしたら思うような動作をさせる事ができるのでしょうか?

回答宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

2つの条件が重複してtrueになっていることが原因です。

一定の位置までスクロールすると、以下のifの条件式が両方ともtrueになります。
そのため出たり消えたりします。

if ($scroll > $aboutTop) { $btn.fadeIn(1000); } else { $btn.fadeOut(500); } if ($aboutBottom < ($scroll * 1.1)) { $btn.hide(); }

アドバイス

※ChromeなどのDev toolsの基本的な見方がわかっている前提で書いています。
わからなかったら、調べるか追加で質問してください。

1: console.log();の使い方を学びましょう
console.log();の使い方が判れば、原因を調査することができます。

https://developer.mozilla.org/ja/docs/Web/API/Console

2: jQueryのFadeIn Fadeoutで実際に何が起こっているか理解しましょう
Dev toolsを開き、FadeIn Fadeoutさせている要素を見れば、
何が起こっているかがわかります。

今回はFadeInとFadeOut(もしくはhide)が重複して作動しているため、
点滅してしまっています。

何が起きているかが理解できれば、どうやって止めるかを考えることができます。

解答(多分こんな感じにしたいんじゃないかなーという推測で書いてます)

現状の理解に合わせた書き方ですとこのような感じです。
ざっくり説明すると、どこからどこまで出して、どこからどこまでを消す、ということを明示するという書き方です。

https://codepen.io/mattari-panda/pen/XWrqWXV?editors=0010

現在はもっとモダンな書き方もあるのですが、ここでは余計な情報になるといけないので書きません。
jQuery, JavaScriptは調べるといろんな情報がでてくるので、大変だと思いますが頑張ってください!

投稿2019/09/11 03:47

mattari_panda

総合スコア429

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

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

退会済みユーザー

退会済みユーザー

2019/09/11 04:15

わざわざ、codepenもご用意いただきありがとうございます。 なるほど!と思う書き方だったと共に、自分では思いつかない書き方でした。。 こちらのコードを参考にして、もっと理解を深めていこうと思います。 ご回答いただき、本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問