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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2709閲覧

【jQuery】固定ヘッダーとハンバーガーメニューの切り替え

6xygen

総合スコア11

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/07/01 15:20

###前提・実現したいこと
jQueryを使ったブレイクポイントでの固定ヘッダーとハンバーガーメニューの切り替えを行いたいです。
縦向き(portrait・ブレイクポイント 480px未満)の時はハンバーガメニューの動作を行い、横向き(landscape・ブレイクポイント 480px以上)の時は一定量スクロールすると画面上部に固定ヘッダーとして表示したいです。

現状、1度ブレイクポイント以上で表示したものが、リサイズや横向きから縦向きに変わり、ウィンドウ幅がブレイクポイント未満になっても、スクロールするとブレイクポイント以上の挙動(addClassメソッドでクラスが付与)をしてしまいます。

初歩的な質問で恐縮ですが、どのように改善すればすれば良いかご教示いただきたいです。
よろしくお願いします。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <style> 8 a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}html{font-family:-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;font-size:62.5%}html *{box-sizing:border-box}body,html{width:100%}button,input,select,textarea{margin:0;padding:0;background:0;border:0;border-radius:0;outline:0;-webkit-appearance:none;-moz-appearance:none}body{position:relative;background-color:#fff;-webkit-text-size-adjust:100%;font-size:1.6rem;line-height:1.75;letter-spacing:1.5px;color:#2c2c2c}img{max-width:100%;height:auto;vertical-align:middle}a{text-decoration:none}.sp{display:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.hamburger{position:fixed;top:0;right:0;width:40px;height:40px;border-left:solid 1px #fff;border-bottom:solid 1px #fff;background-color:#28e;z-index:3;cursor:pointer}.hamburger:before{content:"MENU";position:absolute;left:0;bottom:2px;width:100%;font-size:1rem;color:#fff;text-align:center}.hamburger>div{position:absolute;left:20%;width:60%;height:3px;background-color:#fff;transition-property:all;transition-duration:.4s}.hamburger>div:first-of-type{top:7px}.hamburger>div:nth-of-type(2){top:14px}.hamburger>div:nth-of-type(3){top:21px}.hamburger.active:before{content:"CLOSE"}.hamburger.active>div:first-of-type{top:13px;transform:rotate(765deg)}.hamburger.active>div:nth-of-type(2){width:0;height:0}.hamburger.active>div:nth-of-type(3){top:13px;transform:rotate(-765deg)}.header_nav{position:absolute;top:0;left:0;width:100%;background-color:#28e}.header_nav.fixed{position:fixed}.header_nav_list{width:100%;max-width:980px;margin-right:auto;margin-left:auto}.header_nav_list>li{position:relative;width:25%;text-align:center}.header_nav_list>li+li:before{content:"";position:absolute;left:0;top:calc(50% - 8px);width:1px;height:1pc;background-color:#fff}.header_nav_list>li a{display:block;padding:25px 40px;background-color:#28e;color:#fff}#main{height:300vh;padding-top:78px}.mv{height:100vh;background-color:#888}@media screen and (max-width:480px){.sp{display:block}#header{position:fixed;top:0;left:0;width:100%;z-index:2;transition:transform .4s ease;transform:translateY(-105%)}#header.active{transform:translateY(0)}.header_nav{position:relative;top:auto;left:auto;padding-top:40px}.header_nav:before{content:"";display:block;position:absolute;top:39px;left:0;width:calc(100% - 40px);height:1px;background-color:#fff;z-index:1}.header_nav_list>li{width:100%;height:55px}.header_nav_list>li+li:before{left:0;top:0;width:100%;height:1px}.header_nav_list>li a{padding:15px 40px}#main{padding-top:0}} 9 </style> 10 <title>test page</title> 11</head> 12<body id="top"> 13 <div class="container"> 14 <button class="hamburger sp"> 15 <div></div> 16 <div></div> 17 <div></div> 18 </button> 19 <header id="header"> 20 <nav class="header_nav"> 21 <ul class="header_nav_list flex"> 22 <li><a href="#">AAAA</a></li> 23 <li><a href="#">BBBB</a></li> 24 <li><a href="#">CCCC</a></li> 25 <li><a href="#">DDDD</a></li> 26 </ul> 27 </nav> 28 </header> 29 <main id="main"> 30 <div class="mv"></div> 31 </main> 32 </div> 33 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 34 <script> 35 (function ($) { 36 let $header = $('#header'), 37 $gn = $('.header_nav'), 38 $mv = $('.mv'), 39 $hamburger = $('.hamburger'), 40 bp = 480; 41 $(window).on('resize load orientationchange', function () { 42 let ww = $(this).width(), 43 triggerHeight = $gn.height() + $mv.height(); 44 45 if (ww > bp) { 46 $(this).on('scroll', function () { 47 if ($(this).scrollTop() > triggerHeight) { 48 $gn.addClass('fixed'); 49 } else { 50 $gn.removeClass('fixed'); 51 } 52 }); 53 } else { 54 if ($gn.hasClass('fixed')) $gn.removeClass('fixed'); 55 } 56 }); 57 58 $hamburger.on('click', function () { 59 $(this).toggleClass('active'); 60 $header.toggleClass('active'); 61 }); 62 })(jQuery); 63 </script> 64</body> 65</html>

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

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

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

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

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

guest

回答3

0

幅を見るのは CSS だけにしたほうが簡単になります。

CSS

1@media (min-width: 480px) { 2 .header_nav.fixed { 3 position: fixed; 4 } 5 6 .hamburger.active:before { 7 content: "CLOSE"; 8 } 9 10 .hamburger.active > div:first-of-type { 11 top: 13px; 12 transform: rotate(765deg); 13 } 14 15 .hamburger.active > div:nth-of-type(2) { 16 width: 0; 17 height: 0; 18 } 19 20 .hamburger.active > div:nth-of-type(3) { 21 top: 13px; 22 transform: rotate(-765deg); 23 } 24}

jQuery

1 $(window).on('scroll resize', function () { 2 $gn.toggleClass('fixed', $(this).scrollTop() > $gn.height() + $mv.height()); 3 });

投稿2019/07/02 06:09

x_x

総合スコア13749

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

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

6xygen

2019/07/02 06:47

CSSと上手く組み合わせると、jQueryでの処理がこれだけ短くできるんですね。勉強になりました。回答ありがとうございます。
guest

0

ベストアンサー

resizeのように複数回起こるイベントの中でイベントを登録していると、同じ要素に何度もイベント登録されるので、毎回イベントを解除するかresizeイベント外で使用しましょう。

投稿2019/07/01 15:28

kei344

総合スコア69364

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

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

6xygen

2019/07/02 05:58 編集

kei344さんの回答を参考に改めて、resize内でscrollを走らせないよう挙動を見直してみました。 最適解かは分かりませんが、無事目的の挙動を実現できました。 ありがとうございました。
guest

0

kei344さんのアドバイスを元に実現したい挙動を改めて見直し、
以下の内容で目的の挙動を実現できました。ありがとうございました。

JavaScript

1(function ($) { 2 const $header = $('#header'), 3 $gn = $('.header_nav'), 4 $mv = $('.mv'), 5 $hamburger = $('.hamburger'), 6 bp = 480, 7 headerFix = function(){ 8 const ww = $(window).width(), 9 triggerH = $gn.height() + $mv.height(); 10 11 if( ww > bp && $(this).scrollTop() >= triggerH ){ 12 $gn.addClass('fixed'); 13 } else { 14 $gn.removeClass('fixed'); 15 } 16 }; 17 $(window).on('resize load orientationchange scroll', headerFix); 18 19 $hamburger.on('click', function () { 20 $(this).toggleClass('active'); 21 $header.toggleClass('active'); 22 }); 23})(jQuery);

投稿2019/07/02 06:01

6xygen

総合スコア11

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問