<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>スクロールすると固定になるナビ</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/nav.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="nav2.js"></script> </head> <body> <div id="container"> <header> <a href="#"><h1>Bloomingville</h1></a> <nav> <p id="btn"><span id="hum"></span></p> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Collections</a></li> <li><a href="#">Design philosophy</a></li> <li><a href="#">Press</a></li> <li><a href="#">About</a></li> </ul> </nav> </header><!--/header--> <div id="content"></div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p,ul, ol, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: 0; vertical-align: bottom; } #container { background:#f0ede7; } header { width:100%; padding-top: 30px; background:#e4dfd6; } header > a { display: block; width: 500px; margin: 0 auto; } h1 { background: url(../img/logo.svg) no-repeat center center/contain; height: 100px; text-indent: 100%; white-space: nowrap; overflow: hidden; margin-bottom: 30px; display: block; } nav { width:100%; height: 50px; background:#f0ede7; transition:0.1s; } nav ul { width:70%; margin:0 auto; overflow: hidden; } nav li { float:left; width:calc(100% / 6); } nav li a { display: block; padding-top:20px; padding-bottom:16px; font-size: 14px; text-align:center; color:#222; } nav li a:hover { border-bottom: 4px solid #96F; padding-bottom:12px; } #content { height: 2000px; background: #D9C0BC; } /*ナビゲーションのスクロール*/ header.fixed > #nav { position:fixed; left:0; top:0; } header.fixed h1 { background:url(../img/logo-small.svg) no-repeat center center/contain; width: 140px; height: 50px; position: fixed; left: 20px; top: 0; z-index: 100; } @media screen and (max-width:767px){ header { width:100%; height: 40px; background:#e4dfd6; position: fixed; top: 0; left: 0; padding: 10px 10px 10px 0; } header > a { display: block; width: 200px; float: right; } h1 { background:url(../img/logo-small.svg) no-repeat center center/contain; height: 40px; margin-bottom: 0; } nav { background:#e4dfd6; } #btn { width: 40px; height: 40px; border: 1px solid #000; border-radius: 4px; position: relative; margin-left: 20px; } #hum { display: block; width: 30px; height: 2px; background: #000; position: absolute; top:0; right: 0; bottom: 0; left: 0; margin: auto; transition: 0.2s; } #hum:before { display: block; content: ""; width: 30px; height: 2px; background: #000; position: absolute; top:-20px; right: 0; bottom: 0; left: 0; margin: auto; transition: 0.2s; } #hum:after { display: block; content: ""; width: 30px; height: 2px; background: #000; position: absolute; top:0; right: 0; bottom: -20px; left: 0; margin: auto; transition: 0.2s; } #hum.click { background: transparent; } #hum.click:before { top:0; transform: rotate(45deg); } #hum.click:after { bottom: 0; transform: rotate(135deg); } nav ul { width:100%; position: fixed; top: 60px; padding-left: 10px; background:#f0ede7; display: none; } nav li { float:none; width:100%; line-height: 30px; } nav li a { text-align:left; } nav li a:hover { border-bottom: none; padding-bottom:0; } header.fixed h1 { display: none; } }
// JavaScript Document $(function() { if(window.innerWidth > 767){ $(window).scroll(function() { if ($(window).scrollTop() > 10) { $('header').addClass('fixed').slideDown(900); } else { $('header').removeClass('fixed'); } }); } $('#btn').on('click touchstart',function(){ $('#hum').not(':animated').toggleClass('click'); $('nav ul').not(':animated').slideToggle(200); }); });
修正後のjQuery
// JavaScript Document $(function() { if(window.innerWidth > 767){ var $header = $('header'); $(window).scroll(function() { if ($(window).scrollTop() > 160) { $header.addClass('fixed'); } else { $header.removeClass('fixed'); } }); } $('#btn').on('click touchstart',function(){ if($(window).innerWidth() <= 767){ $('#hum').not(':animated').toggleClass('click'); $('nav ul').not(':animated').slideToggle(200); }; }); $(window).resize(function(){ $('nav ul').hide();//スマホの時 if($(window).innerWidth() > 768){ $('nav ul').show();//タブレット以上の時 $('#hum').removeClass('click');//PCから戻る時に邪魔な.clickを削除するため } }); });