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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

2回答

897閲覧

PCでの表示の際、スクロールしても表示されないようにしたい

satoru225Simple

総合スコア27

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2019/04/22 08:04

前提・実現したいこと

jsを使って、PCは要素を非表示、スマホにて、
一定の位置までスクロールをしたら
非表示になるコードを作成しています。

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

PCのサイズで表示した場合、読み込み時は非表示になるが、 スクロールをした際に、表示してしまうため、 PCで表示しているときは、ずっと非表示にしたいと思っております。 sampleページ https://codepen.io/satoru1993/pen/QPBjNa

該当のソースコード

html

1<div class="test">contentsの高さ</div> 2 3<div class="foot_select"> 4 <p class="selection_ttl">テキスト 5</p> 6 <div class="select3"> 7 <div class="foot_box"> 8 <p class="select_name">テキスト 9 </p> 10 <p class="select_explan">テキストテキスト<span class="select_cost red">テキストテキスト</span></p> 11 <div class="select_exlink"><a href="#">テキストテキスト</a></div> 12 </div> 13 <div class="foot_box"> 14 <p class="select_name">テキスト 15 </p> 16 <p class="select_explan">テキストテキスト<span class="select_cost red">テキストテキスト</span></p> 17 <div class="select_exlink"><a href="#">テキストテキスト</a></div> 18 </div> 19 <div class="foot_box"> 20 <p class="select_name">テキスト 21 </p> 22 <p class="select_explan">テキストテキスト<span class="select_cost red">テキストテキスト</span></p> 23 <div class="select_exlink"><a href="#">テキストテキスト</a></div> 24 </div> 25</div>

css

1body{ 2 height:200vh; 3} 4.test{ 5 height:8000px; 6} 7/*コピーはここから下*/ 8/*PC用のCSS※レスポンシブで、pc非表示の場合*/ 9.foot_select { 10 display: none; 11} 12/*spのCSS*/ 13.foot_select { 14 display: block; 15 width: 100%; 16 border: 1px solid #b8b8ba; 17 position: fixed; 18 bottom:0; 19 left: 0; 20 right: 0; 21 z-index: 20; 22 text-align: center; 23 background: #fff; 24 font-size: 0.7em; 25 line-height: 1.4em; 26 font-weight: bold; 27} 28.foot_select .foot_box { 29 flex: 1; 30 position: relative; 31 border-top: 1px solid #b8b8ba; 32 border-right: 1px solid #b8b8ba; 33} 34.foot_select p.select_name { 35 background: #94d004;; 36 color: #fff; 37 letter-spacing: -0.1em; 38 padding: 4px 2px; 39 line-height: 1.3em; 40 font-weight: normal; 41 height: 16px; 42 font-weight: bold; 43 margin: 0px; 44} 45 46.foot_select .select_explan { 47 padding: 2px 2px; 48 font-weight: normal; 49 letter-spacing: -0.1em; 50} 51.select_explan span { 52 display: block; 53 font-size: 14px; 54 margin: 2px; 55} 56span.select_cost.red { 57 color: #ff0000; 58 font-size: 16px; 59 font-weight: bold; 60} 61 62.foot_select .select_exlink a { 63 display: block; 64 width: 100%; 65 height: auto; 66 color: #fff; 67 padding: 5px 2px; 68 font-size: 0.8rem; 69 background: #ff5b00; 70box-sizing: border-box; 71} 72.select3 { 73 display: flex; 74 width: 100%; 75} 76

js

1$(function(){ 2test(); 3 4 window.onscroll = function () { 5 var check = window.pageYOffset ; 6 var docHeight = $(document).height(); 7 var dispHeight = $(window).height(); 8 9 if(check > docHeight-dispHeight-1500){ 10 $('.foot_select').fadeOut(100); 11 12 }else{ 13 $('.foot_select').fadeIn(1000); 14 } 15 }; 16 17}); 18 19function test(){ 20 var w = $(window).width(); 21 var x = 768; 22 if (w < x) { 23 $(".foot_select").fadeIn('fast'); 24 } else { 25 $(".foot_select").hide(); 26 } 27}

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

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

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

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

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

guest

回答2

0

ベストアンサー

test()で隠した後にスクロールでfadeInしているから非表示になっていないように見えるだけでは?

投稿2019/04/22 08:19

hanhunhun

総合スコア100

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

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

satoru225Simple

2019/04/22 08:25

回答してくださり、ありがとうございます。 ”test()で隠した後にスクロールでfadeInしているから非表示になっていないように見えるだけでは” とのご指摘ですが、 この場合、どうコードを修正すれば、表示されずに済むでしょうか? もしお時間ありましたら、ご教授いただけますと幸いです。
hanhunhun

2019/04/22 09:01

test()で要素の挙動を決定した際になにかしら値を返してその値でスクロールイベントを行うかどうか制御したらどうですか? PCサイズならスクロールイベントを行わない 指定サイズ以下ならスクロールイベントを行う
satoru225Simple

2019/04/22 09:05

ありがとうございます。 試してみたいと思います。 少し時間がかかるため、 返答が遅くなるかと思います。 何卒宜しくお願い致します。
satoru225Simple

2019/04/22 09:30

改めて試してみましたが、 $(function(){ test(); $(window).on('scroll touchmove',function(){ var check = window.pageYOffset ; var docHeight = $(document).height(); var dispHeight = $(window).height(); if(check > docHeight-dispHeight-1500){ $('.foot_select').fadeOut(100); }else{ $('.foot_select').fadeIn(1000); } }); var timer = false; $(window).on('resize',function(){ $(".foot_select").hide(); // resize中は要素を隠す if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function(){ test(); // resizeイベントの完了から500ms後に実行される }, 0); }); }); function test(){ var w = $(window).width(); var x = 768; if (w < x) { $(".foot_select").fadeIn('fast'); } else { $(".foot_select").hide(); } } resize時の挙動を追加してみましたが、 うまくいきませんでした。 回答してくださったことがうまく理解できていないのだと思います。 もし可能でしたら、コードをご教授いただくことは可能でしょうか? お時間ありましたら、何卒宜しくお願い致します。
hanhunhun

2019/04/23 05:05

こんなかんじで $(function(){ var w = $(window).width(); var w_chk; // 初期値の取得 w_chk = test(w); console.log(w_chk); $(window).on('resize',function(){ w = $(window).width(); w_chk = test(w); if(w_chk === false){ $(".foot_select").hide(); } }); var timer = false; $(window).on('scroll touchmove',function(){ console.log(w_chk); if(w_chk === true){ var check = window.pageYOffset ; var docHeight = $(document).height(); var dispHeight = $(window).height(); if(check > docHeight-dispHeight-1500){ $('.foot_select').fadeOut(100); }else{ $('.foot_select').fadeIn(1000); } } }); }); function test(w){ x = 768; if (w < x) { $(".foot_select").fadeIn('fast'); return true; } else { $(".foot_select").hide(); return false; } }
satoru225Simple

2019/04/24 07:22

返信が遅くなってしまい申し訳ございません! ソースコードをご教授してくださりありがとうございます! 明日までに試してみたいと思いますのでよろしくお願い致します!
satoru225Simple

2019/04/25 01:20

うまく実装することができました! ありがとうございました!
guest

0

まあまあ制御が面倒になるので、アニメーションをCSSですると楽かもしれません。

CSS

1.foot_select { 2 transition: opacity 1s cubic-bezier(.02, .01, .47, 1), visibility 1s linear -0.9s; 3 opacity: 0; 4 visibility: hidden; 5} 6 7.foot_select.show { 8 transition-delay: 0s; 9 opacity: 1; 10 visibility: visible; 11} 12 13@media screen and (min-width: 768px) { 14 .foot_select { 15 display: none; 16 } 17}

JavaScript

1 $(window).on('scroll', function() { 2 var check = window.pageYOffset; 3 var docHeight = $(document).height(); 4 var dispHeight = $(window).height(); 5 6 $('.foot_select').toggleClass('show', check + dispHeight + 1500 > docHeight); 7 }).trigger('scroll');

投稿2019/04/24 06:28

x_x

総合スコア13749

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

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

satoru225Simple

2019/04/24 07:21

ありがとうございます! なるほど、cssでというのは考えていませんでした。 試してみたいと思います!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問