Q&A
http://www.calistar.co.jp/
このサイトように
SP閲覧時、グローバルナビがスクロールすると背景色を付くようにしたいのですが
うまく動作しません
ご確認をお願いしたいです。
よろしくお願いします。
html
1コード<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1"> 6<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 7<title></title> 8<link href="css/reset.css" rel="stylesheet" type="text/css"> 9<link href="css/style.css" rel="stylesheet" type="text/css"> 10<script> 11$(function(){ 12 $('.menu-trigger').on('click',function(){ 13 $(this).toggleClass('active'); 14 $('.g-nav').slideToggle(); 15 }); 16}); 17</script> 18<script> 19 $(function() { 20 var $win = $(window), 21 $header = $('.menu-trigger'), 22 animationClass = '.is-animation'; 23 24 $win.on('load scroll', function() { 25 var value = $(this).scrollTop(); 26 if ( value > 100 ) { 27 $header.addClass(animationClass); 28 } else { 29 $header.removeClass(animationClass); 30 } 31 }); 32}); 33</script> 34</head> 35<body> 36 <header> 37 <a class="menu-trigger"> 38 <span></span> 39 <span></span> 40 <span></span> 41</a> 42<nav class="g-nav"> 43 <ul class="list"> 44 <li class="item"><a href="">ホーム</a></li> 45 <li class="item"><a href="">お知らせ</a></li> 46 <li class="item"><a href="">キャリスターについて</a></li> 47 <li class="item"><a href="">取扱い車種</a></li> 48 <li class="item"><a href="">会社概要</a></li> 49 <li class="item"><a href="">よくあるご質問</a></li> 50 <li class="item"><a href="">採用情報</a></li> 51 <li class="item"><a href="">お問い合わせ</a></li> 52 <li class="item"><a href="">プライバシーポリシー</a></li> 53 </ul> 54</nav> 55 <div class="main_bg"> 56 <p><img src="img/main_top.jpg" alt="背景"></p> 57 <h1 class="logo_img slid_left"><img src="img/logo.png" alt="キャリスター"></h1> 58 <div class="text"> 59 <span>共</span> 60 <span>に</span> 61 <span>考</span> 62 <span>え</span> 63 <span>、</span> 64 <span>共</span> 65 <span>に</span> 66 <span>創</span> 67 <span>り</span> 68 <span>上</span> 69 <span>げ</span> 70 <span>る</span></div></div> 71 </header> 72 <main> 73 <div class="news"> 74 <p>2017.6.30 タイトルが入ります。タイトルが入ります。</p> 75 </div> 76 <section class="content_1"> 77 <div class="content_box1"> 78 <h2>キャリスターについて<br> 79 <span class="sub_title">ABOUT US</span></h2> 80 <p class="title_text">私たちは“共に考え、<br> 81 共に創り上げる”物流カンパニーです。<br> 82 豊富な実績と経験を生かし、<br> 83 オンリーワンの物流会社を目指しています</p> 84 <p class="link"><a href="#">詳しくはこちら</a></p> 85 </div> 86 </section> 87 <section> 88 <p><a href="#"><img src="img/main_img1.jpg" alt="取り扱い車種、詳しくはこちら"></a></p> 89 </section> 90 <section> 91 <p><a href="#"><img src="img/main_img2.jpg" alt="会社概要、詳しくはこちら"></a></p> 92 </section> 93 <section class="content_2"> 94 <div class="content_box1"> 95 <h2>求人情報<br> 96 <span class="sub_title">RECRUIT</span></h2> 97 <p class="title_text">お客様の笑顔のために、<br> 98 共に会社を盛り上げてくれる方を<br> 99 募集しています。<br> 100 あなたのキャリアアップもお手伝いします!</p> 101 <p class="link"><a href="#">詳しくはこちら</a></p> 102 </div> 103 </section> 104 </main> 105</body> 106</html>
css
1コード 2```/*ヘッダーメニュー開始*/ 3.menu-trigger, 4.menu-trigger span{ 5 display: inline-block; 6 transition: all .4s; 7 box-sizing: border-box; 8 cursor :pointer; 9} 10.menu-trigger{ 11 position:fixed; 12 width: 50px; 13 height: 50px; 14 z-index: 3; 15 left:0; 16 transition:.3s; 17} 18.menu-trigger span{ 19 position: absolute; 20 background: #fff; 21 width: 30px; 22 height: 3px; 23 left: 0; 24 right: 0; 25 margin: auto; 26} 27.menu-trigger span:nth-of-type(1){ 28 top: 14px; 29} 30.menu-trigger span:nth-of-type(2){ 31 top: 0; 32 bottom: 0; 33} 34.menu-trigger span:nth-of-type(3){ 35 bottom: 14px; 36} 37.menu-trigger.active span:nth-of-type(1){ 38 -webkit-transform: translateY(9px) rotate(-45deg); 39 transform: translateY(9px) rotate(-45deg); 40} 41.menu-trigger.active span:nth-of-type(2){ 42 opacity: 0; 43} 44.menu-trigger.active span:nth-of-type(3){ 45 -webkit-transform: translateY(-9px) rotate(45deg); 46 transform: translateY(-9px) rotate(45deg); 47} 48.g-nav{ 49 display: none; 50 position:fixed; 51 top: 0; 52 background:#000000e8; 53 width: 100%; 54 height: 100%; 55 z-index: 2 56} 57.g-nav .list{ 58 padding: 50px 10px 0; 59} 60.g-nav .list .item{ 61 line-height:1.3; 62 border-bottom: 1px solid #ffffff40; 63} 64.g-nav .list .item a{ 65 display: block; 66 text-align: center; 67 text-decoration: none; 68 color: #ffffffe8; 69 padding: 15px 0; 70} 71/*ヘッダーメニュースクロール後アニメーション*/ 72.is-animation { 73 background-color: rgba(9,54,152,0.79); 74} 75 76```jQuery 77コード<script>/*グローバルナビアクション*/ 78$(function(){ 79 $('.menu-trigger').on('click',function(){ 80 $(this).toggleClass('active'); 81 $('.g-nav').slideToggle(); 82 }); 83}); 84</script> 85<script>/*スクロール時グローバルナビの背景色を変える*/ 86 $(function() { 87 var $win = $(window), 88 $header = $('.menu-trigger'), 89 animationClass = '.is-animation'; 90 91 $win.on('load scroll', function() { 92 var value = $(this).scrollTop(); 93 if ( value > 100 ) { 94 $header.addClass(animationClass); 95 } else { 96 $header.removeClass(animationClass); 97 } 98 }); 99}); 100</script> 101
足りない情報がありましたら、追加、修正します。
よろしくお願い致します。
回答1件
0
ベストアンサー
.menu-triggerに適切なクラス名が当たってないようです。
animationClass = '.is-animation';をanimationClass = 'is-animation';とすればスクロールすると背景色がつきます。
.addClass()、.removeClass()の引数に記述するのはクラス名のみで「.（ドット）」は入らないです
投稿2018/08/01 02:35
総合スコア69
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/01 04:09