前提・実現したいこと
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}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/22 08:25
2019/04/22 09:01
2019/04/22 09:05
2019/04/22 09:30
2019/04/23 05:05
2019/04/24 07:22
2019/04/25 01:20