Q&A
前提・実現したいこと
ホームページのグローバルナビゲーションにスクロールアニメーションを取り入れました。
下部へスクロールすると可変し画面上部に固定されるようにしたかったのですが
下からスクロールしてくる状態になっています。
再度読み込まなければ、きちんと可変してくれるようです。
他のJavaScriptとぶつかってしまっているのでしょうか。
ご教示お願いいたします。
URL
該当のソースコード
php
1<!doctype html> 2<html lang="ja"> 3 4<head> 5 <?php wp_head(); ?> 6</head> 7 8<body <?php body_class(); ?>> 9 10 <header class="header"> 11 <div class="border"></div> 12 <div class="mouse"><a href="<?php echo esc_url( home_url() ); ?>"><span></span></a></div> 13 <div class="header-top"> 14 <div class="header-top__inner fade-in-bottom"> 15 </div> 16 <nav class="nav"> 17 <ul> 18 <li><a href="<?php echo esc_url( home_url("service") ); ?>">製品・サービス</a></li> 19 <li><a href="<?php echo get_permalink(get_page_by_path('news-event')); ?>">ニュース・イベント</a></li> 20 <li><a href="<?php echo esc_url( home_url("about-us") ); ?>">会社案内</a></li> 21 <li><a href="<?php echo esc_url( home_url("privacy-policy") ); ?>">個人情報保護方針</a></li> 22 <li><a href="<?php echo esc_url( home_url("recruit") ); ?>">採用情報</a></li> 23 <li><a href="<?php echo esc_url( home_url("contact") ); ?>">お問合せ</a></li> 24 </ul> 25 </nav> 26 </div> 27 <div class="header-under"> 28 <div class="header-under__inner"> 29 <div class="header-under__item"> 30 <div class="header-under__img"> 31 <div class="border02"> 32 </div> 33 </div> 34 </div> 35 </div> 36 </div> 37 </header>
css
1.nav { 2 overflow: hidden; 3 background-color: #1b1464; 4 padding-left: 25px; 5 margin-top: -100px; 6 margin-left: calc(50% - 382px); 7 z-index: 1; 8 position: relative; 9 transition: 0.5s; 10} 11 12.nav li:after { 13 background-color: #1b1464; 14 height: 100px; 15 width: 100%; 16 display: block; 17} 18 19.nav li { 20 text-align: center; 21 float: left; 22 padding: 42px 25px; 23 right: 0; 24} 25 26a.current { 27 padding-bottom: 8px; 28 border-bottom: solid 1px #fff; 29} 30 31.nav li a { 32 color: #fff; 33 font-size: 1.5rem; 34} 35 36.fixed { 37 position: fixed; 38 width: 100%; 39 padding: 0; 40 margin-left: 0; 41 display: flex; 42 align-items: center; 43 flex-direction: column; 44 flex-wrap: nowrap; 45 transition: 0.5s; 46}
javascript
1$(function () { 2 var headNav = $(".nav"); 3 //scrollだけだと読み込み時困るのでloadも追加 4 $(window).on('load scroll', function () { 5 //現在の位置が800px以上かつ、クラスfixedが付与されていない時 6 if ($(this).scrollTop() > 800 && headNav.hasClass('fixed') == false) { 7 //headerの高さ分上に設定 8 headNav.css({ 9 "top": '-100' 10 }); 11 //クラスfixedを付与 12 headNav.addClass('fixed'); 13 //位置を0に設定し、アニメーションのスピードを指定 14 headNav.animate({ 15 "top": 100 16 }, 600); 17 } 18 //現在の位置が600px以下かつ、クラスfixedが付与されている時にfixedを外す 19 else if ($(this).scrollTop() < 600 && headNav.hasClass('fixed') == true) { 20 headNav.removeClass('fixed'); 21 headNav.animate({ 22 "top": 0 23 }, 600); 24 } 25 }); 26}); 27 28$(function () { 29 var appear = false; 30 var pagetop = $('#page_top'); 31 $(window).scroll(function () { 32 if ($(this).scrollTop() > 100) { //100pxスクロールしたら 33 if (appear == false) { 34 appear = true; 35 pagetop.stop().animate({ 36 'bottom': '50px' //下から50pxの位置に 37 }, 300); //0.3秒かけて現れる 38 } 39 } else { 40 if (appear) { 41 appear = false; 42 pagetop.stop().animate({ 43 'bottom': '-50px' //下から-50pxの位置に 44 }, 300); //0.3秒かけて隠れる 45 } 46 } 47 }); 48 pagetop.click(function () { 49 $('body, html').animate({ 50 scrollTop: 0 51 }, 500); //0.5秒かけてトップへ戻る 52 return false; 53 }); 54}); 55 56$(function () { 57 $(window).bind("scroll", function () { 58 scrollHeight = $(document).height(); 59 scrollPosition = $(window).height() + $(window).scrollTop(); 60 if ((scrollHeight - scrollPosition) / scrollHeight <= 0.05) { 61 //一番下までスクロールした時に実行 62 $('.mouse').hide('slow'); 63 } else { 64 $('.mouse').show('slow'); 65 } 66 }); 67});
試したこと
JavaScriptの
//位置を0に設定し、アニメーションのスピードを指定 headNav.animate({ "top": 100 }, 600);
の部分の位置などを調整してみましたが、改善はされませんでした。
回答1件
0
ベストアンサー
おそらく、トランジションが効いているのだと思います。
以下を追加するとどうでしょうか。
css
1.fixed { 2 top: 0; 3}
投稿2021/05/17 02:54
総合スコア36115
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/17 04:05
2021/05/17 05:30