このコードを書いたら確かに思った通りの動作になるのですが、ページを更新しないと画面幅を取得していないように思いました。
これをページ更新せずに画面幅が変わったときにきちんと狙った処理ができるようにはできるものなのでしょうか?
調べてみましたが、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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。