Q&A
$(function)ってそういうことだったんですね。勉強になります。
resize等を使って書き換えてみたのですが今度はjavascript自体が機能しなくなってしまいました。
書き方が間違っていたのかfunctionを取ってしまったのが間違いなのか…
スクリプト自体に記載していることは簡単なことだと思うんですが謎が深まるばかりです
このコードを書いたら確かに思った通りの動作になるのですが、ページを更新しないと画面幅を取得していないように思いました。
これをページ更新せずに画面幅が変わったときにきちんと狙った処理ができるようにはできるものなのでしょうか？
調べてみましたが、resizeを使えばいけるのかなということに辿り着いた感じです。
実際にresizeで出来るのかすらあまりわかっていないそんな状態です。
JavaScript
1if(window.matchMedia('(min-width:1200px)').matches) { 2 //画面幅が992px以上の場合のみ有効。ページ更新時のWindow幅で判断。 3 $(function() { 4 $('#room-search').hide(); 5 var gnavi = $('#header-mid'); 6 var gnaviTop = gnavi.offset().top; 7 var gnaviHeight = gnavi.height(); 8 var bottom = $('#header-bottom'); 9 var bottomTop = bottom.offset().top; 10 var bottomHeight = bottom.height(); 11 bottom.css('top', -bottomHeight+'px'); 12 $(window).scroll(function () { 13 //TOPから460pxスクロールしたときにroom-searchをほわっと出力。460px未満で隠す。 14 if($(this).scrollTop() <= 460 && !$('#room-search').is(':hidden')){ 15 $('#room-search').hide(); 16 }else if($(this).scrollTop() > 460 && $('#room-search').is(':hidden')){ 17 $('#room-search').fadeIn("slow"); 18 } 19 if(($(this).scrollTop() - gnaviTop) < 0){ 20 //header-midがウィンドウ上部から離れたときの動作をしたときに適応 21 gnavi.height(gnaviHeight); 22 $('#global-navi li a').css({'padding' : '25px 35px'}); 23 gnavi.css({position:"static", top: "auto"}); 24 bottom.css({position:"static", top: "auto"}); 25 bottom.removeClass('header-shadow'); 26 }else if(($(this).scrollTop() - gnaviTop) < 55){ 27 //header-midがウィンドウ上部に触れたときの動作 28 gnavi.height((gnaviTop+gnaviHeight+4) - $(this).scrollTop()); 29 gnavi.css({position:"fixed", top: 0}); 30 bottom.css({position:"fixed", top: gnavi.height()}); 31 bottom.removeClass('header-shadow'); 32 $('#global-navi li a').css({'padding' : ((gnavi.height() -20)/2)+'px 35px'}); 33 }else{ 34 //ヘッダーに固定されたときheader-midの高さ30px確保し、ナビメニューの余白を上下5px左右20px保持 35 gnavi.height(30); 36 $('#global-navi li a').css({'padding' : '5px 35px'}); 37 gnavi.css({position:"fixed", top: 0}); 38 bottom.css({position:"fixed", top: gnavi.height()}); 39 bottom.addClass('header-shadow'); 40 } 41 }); 42 }); 43}else if (window.matchMedia('(min-width:991px) and (max-width: 1200px)').matches) { 44 $(function() { 45 $('#room-search').hide(); 46 var gnavi = $('#header-mid'); 47 var gnaviTop = gnavi.offset().top; 48 var gnaviHeight = gnavi.height(); 49 var bottom = $('#header-bottom'); 50 var bottomTop = bottom.offset().top; 51 var bottomHeight = bottom.height(); 52 bottom.css('top', -bottomHeight+'px'); 53 $(window).scroll(function () { 54 if($(this).scrollTop() <= 460 && !$('#room-search').is(':hidden')){ 55 $('#room-search').hide(); 56 }else if($(this).scrollTop() > 460 && $('#room-search').is(':hidden')){ 57 $('#room-search').fadeIn("slow"); 58 } 59 if(($(this).scrollTop() - gnaviTop) < 0){ 60 gnavi.height(gnaviHeight); 61 $('#global-navi li a').css({'padding' : '30px 20px'}); 62 gnavi.css({position:"static", top: "auto"}); 63 bottom.css({position:"static", top: "auto"}); 64 bottom.removeClass('header-shadow'); 65 }else if(($(this).scrollTop() - gnaviTop) < 55){ 66 gnavi.height((gnaviTop+gnaviHeight+4) - $(this).scrollTop()); 67 gnavi.css({position:"fixed", top: 0}); 68 bottom.css({position:"fixed", top: gnavi.height()}); 69 bottom.removeClass('header-shadow'); 70 $('#global-navi li a').css({'padding' : ((gnavi.height() -20)/2)+'px 20px'}); 71 }else{ 72 gnavi.height(30); 73 $('#global-navi li a').css({'padding' : '5px 20px'}); 74 gnavi.css({position:"fixed", top: 0}); 75 bottom.css({position:"fixed", top: gnavi.height()}); 76 bottom.addClass('header-shadow'); 77 } 78 }); 79 }); 80}else{ 81 $(function() { 82 $('#room-search').hide(); 83 var gnavi = $('#header-mid'); 84 var gnaviTop = gnavi.offset().top; 85 var gnaviHeight = gnavi.height(); 86 var bottom = $('#header-bottom'); 87 var bottomTop = bottom.offset().top; 88 var bottomHeight = bottom.height(); 89 bottom.css('top', -bottomHeight+'px'); 90 $(window).scroll(function () { 91 if(($(this).scrollTop() - gnaviTop) < 0){ 92 gnavi.height(gnaviHeight); 93 $('#global-navi li a').css({'padding' : '30px 20px'}); 94 gnavi.css({position:"static", top: "auto"}); 95 bottom.css({position:"static", top: "auto"}); 96 bottom.removeClass('header-shadow'); 97 }else if(($(this).scrollTop() - gnaviTop) < 55){ 98 gnavi.height((gnaviTop+gnaviHeight) - $(this).scrollTop()); 99 gnavi.css({position:"fixed", top: 0}); 100 bottom.css({position:"fixed", top: gnavi.height()}); 101 bottom.removeClass('header-shadow'); 102 $('#global-navi li a').css({'padding' : ((gnavi.height() -20)/2)+'px 20px'}); 103 }else{ 104 gnavi.height(30); 105 $('#global-navi li a').css({'padding' : '5px 20px'}); 106 gnavi.css({position:"fixed", top: 0}); 107 bottom.css({position:"fixed", top: gnavi.height()}); 108 bottom.addClass('header-shadow'); 109 } 110 }); 111 }); 112}
回答3件
0
回答というより確認なのですが、デザインを変えるのが目的ならレスポンシブデザインとかはいかがでしょうか？
JavaScriptではなくCSSの対応になってしまいますが。
@media screen and (min-width: 1200px){
//やりたいこと
}
投稿2016/08/19 08:24
総合スコア116
0
ベストアンサー
$(function)はreadyメソッドの省略形ですので、DOMがすべて読み込まれた時に実行されます。
要するに後から中のイベントを発火させることは出来ません。
$(window).resizeはご存知の通りウィンドウのリサイズを監視してますので、その中に処理を書けば動きます。
window.matchMediaを使ってイベントリスナーを追加することもできるので、以下の方法で対応できます。
JavaScript
1$(window).resize(function() { 2 if(window.matchMedia('(min-width:1200px)').matches) { 3 // 処理... 4 } 5 ... 6});
もしくは
JavaScript
1window.matchMedia("(min-width:1200px)'").addListener(widthChange1200px); 2 3function widthChange1200px() { 4 // 処理... 5} 6...
投稿2016/08/19 05:58
総合スコア830
$(window).resizeの外側には$(function)が必要ですよ。
$(function)はその中に入っているコードの機能をONにするようなイメージです。
0
こんな感じとか。
nomuraさんのおっしゃるようにほとんどはCSSで処理できる気もします。
JavaScript
1var now = 0; 2var opt = [ { 3 padd1: '25px 35px' 4 , padd2: '35px' 5 , padd3: '5px 35px' 6 , height: 4 7 }, { 8 padd1: '30px 20px' 9 , padd2: '20px' 10 , padd3: '5px 20px' 11 , height: 4 12 }, { 13 padd1: '30px 20px' 14 , padd2: '20px' 15 , padd3: '5px 20px' 16 , height: 0 17 } ]; 18// ↑差があったところのみ抽出 19 20$( window ).on( 'load resize', function() { 21 if ( window.matchMedia( '(min-width:1200px)' ).matches ) { 22 now = 0; 23 } else if ( window.matchMedia( '(min-width:991px) and (max-width: 1200px)' ).matches ) { 24 now = 1; 25 }else{ 26 now = 2; 27 } 28} ); 29$( window ).on( 'scroll', function() { 30 var o = opt[ now ]; 31 if ( now === 1 ) { 32 if($(this).scrollTop() <= 460 && !$('#room-search').is(':hidden')){ 33 $('#room-search').hide(); 34 }else if($(this).scrollTop() > 460 && $('#room-search').is(':hidden')){ 35 $('#room-search').fadeIn("slow"); 36 } 37 } 38 if(($(this).scrollTop() - gnaviTop) < 0){ 39 gnavi.height(gnaviHeight); 40 $('#global-navi li a').css({'padding' : o.padd1 }); 41 gnavi.css({position:"static", top: "auto"}); 42 bottom.css({position:"static", top: "auto"}); 43 bottom.removeClass('header-shadow'); 44 }else if(($(this).scrollTop() - gnaviTop) < 55){ 45 gnavi.height((gnaviTop+gnaviHeight+ o.height ) - $(this).scrollTop()); 46 gnavi.css({position:"fixed", top: 0}); 47 bottom.css({position:"fixed", top: gnavi.height()}); 48 bottom.removeClass('header-shadow'); 49 $('#global-navi li a').css({'padding' : ((gnavi.height() -20)/2)+'px ' + o.padd2 }); 50 }else{ 51 gnavi.height(30); 52 $('#global-navi li a').css({'padding' : o.padd3 }); 53 gnavi.css({position:"fixed", top: 0}); 54 bottom.css({position:"fixed", top: gnavi.height()}); 55 bottom.addClass('header-shadow'); 56 } 57} ); // 未テスト
投稿2016/08/19 08:53
総合スコア69398
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。