JS初心者のものです。
固定ヘッダーに関して質問させてください。
現在スクロールすると途中からナビゲーションが固定で付いてくるサイトを作っています。
基本的に1ページで、ナビゲーションにアンカーリンクをつけてその指定場所にスムーススクロールするといったよくあるサイトです。
一部下層ページがあり、下層ページのナビゲーションからTOPトップページのアンカーリンクを指定したところにすると、
アンカーリンクがうまく動作せず、ずれて表示されてしまいます。
また、firefoxに関しては固定ヘッダーが表示されず、ちょっとスクロールすると表示されてしまう状況です。
ここで詰まってしまい解決できないため質問させていただきました。
おそらくJSかCSS書き方が悪いと思いますので、皆様のお力を貸していただきたく思います。
JSは</body>直前で読み込ませております。
テストサイトとソースコード一式を下記に記載させていただきますので、お力添えをいただけますと非常に助かります。
--
(解決したのでソースコードは非表示にしました。ご協力ありがとうございました。)
--
ご協力何卒宜しくお願い致します。
(追記) FIREFOXではナビゲーションが表示されるようになりました。ご協力者さまありがとうございます。
// ================================================================== // ============================== 共通 ============================== // ================================================================== // WOW.jS new WOW().init(); // firefox用 ヘッダー固定 // $(window).load(function (){ // if(top.location.href.match(/\#projects$/)){ // top.location.href = "#projects" // } else if(top.location.href.match(/\#people$/)){ // top.location.href = "#people" // } else if(top.location.href.match(/\#company$/)){ // top.location.href = "#company" // } // }); // PC/SP条件分岐 var windowWidth = $(window).width(); var windowSm = 824; if (windowWidth <= windowSm) { // ================================================================== // ========== 横幅824px以下のとき(つまりスマホ時)に行う処理を書く ========= // ================================================================== $(function(){ //========== SP AREA START ==========// var windowWidth = $(window).width(); $(window).resize(function(){ var ww = $(window).width(); if(windowWidth != ww) { //リサイズ時に実行する処理 setTimeout(function() { //リロードする location.reload(); }, 200); windowWidth = ww; } }); // smooth scroll $('a[href^=#]').click(function(){ var headerHight = 36; //ヘッダの高さ var speed = 1000; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす $("html, body").animate({scrollTop:position}, speed, "easeInOutQuad"); return false; }); // global navigation $(function(){ hTop = $('#gnavi').offset().top; }); $(window).scroll(function () { if($(window).scrollTop() > hTop + 0) { $('#gnavi').css('position', 'fixed'); $('#gnavi').css('top', '0px'); $('#gnavi').css('width', '100%'); $('#gnavi').css('text-align', 'center'); $('#gnavi').css('z-index', '12'); $('#gnavi').css('padding-top', '0px'); }else{ $('#gnavi').css('position', 'absolute'); $('#gnavi').css('top', '10px'); } }); //========== SP AREA END ==========// }); } else { // ================================================================== // ========== 横幅825px超のとき(タブレット、PC)に行う処理を書く ========== // ================================================================== $(function(){ //========== TABLET/PC AREA START ==========// // 画面幅が変わったらリロード var timer = false; $(window).resize(function() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { //リロードする location.reload(); }, 200); }); // smooth scroll $('a[href^=#]').click(function(){ var headerHight = 53; //ヘッダの高さ var speed = 1000; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす $("html, body").animate({scrollTop:position}, speed, "easeInOutQuad"); return false; }); // global navigation $(function(){ hTop = $('#gnavi').offset().top; }); $(window).scroll(function () { if($(window).scrollTop() > hTop + 0) { $('#gnavi').css('position', 'fixed'); $('#gnavi').css('top', '0px'); $('#gnavi').css('width', '1000px'); $('#gnavi').css('text-align', 'center'); $('#gnavi').css('z-index', '12'); $('#gnavi').css('padding-top', '0px'); }else{ $('#gnavi').css('position', 'absolute'); $('#gnavi').css('top', '70px'); } }); //========== TABLET/PC AREA END ==========// }); }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/08/24 07:27 編集
2017/08/24 09:05
退会済みユーザー
2017/08/24 12:04
退会済みユーザー
2017/08/24 12:40
2017/08/25 00:20
退会済みユーザー
2017/08/25 03:54
退会済みユーザー
2017/09/11 18:46