---
# System prepended metadata

title: SnowMonkey：一定数スクロールしたら下から固定ナビバナーがポップアップ

---

# SnowMonkey：一定数スクロールしたら下から固定ナビバナーがポップアップ

◆変更内容
・上から一定数スクロールしたら、下から設定したコンテンツがポップアップ
・上部に戻ると自動でポップダウン
・フッター、フッター固定ナビ（モバイル用）とは別
・フッターと被らないように位置調整可能
・今回は200pxスクロールしたらポップアップするように設定

◆サンプル
![](https://i.imgur.com/khD9fQg.jpg)

◆変更ファイル（子テーマ使用）
・functions.php
・assets/js/nav-tab.js（新規に作成）
・templates/layout/wrapper/その時使うテンプレート.php
・css

<br>

functions.php
```
//jQuery使用のJSファイル読み込み
add_action( 'wp_enqueue_scripts', function() {
	// jQuery プラグインを実行させるコードを記述するための js ファイル
	wp_enqueue_script(
		'navtab-js',
		get_theme_file_uri( '/assets/js/nav-tab.js' ),
		array( 'jquery' ),
		false,
		true
	);
} );
```

nav-tab.js
```
//指定の高さを超えたら、下から固定タブを表示するCSSの呼び出し関数
function NavTabAnime(){
    var scroll = jQuery(window).scrollTop();
    if(scroll >= 200){
        jQuery('#sakuraid').removeClass('DownMove');
        jQuery('#sakuraid').addClass('UpMove');
    }else{
        if(jQuery('#sakuraid').hasClass('UpMove')){
            jQuery('#sakuraid').removeClass('UpMove');
            jQuery('#sakuraid').addClass('DownMove');
        }
    }
}

//画面スクロールで動かす
jQuery(window).scroll(function(){
    NavTabAnime();
}
)

```

その時使うテンプレート.php
（one-column-slim.php）
```
/*<?php wp_footer(); ?>の直前に挿入*/

<!-- スティッキータブ -->
	<div class="sakura" id="sakuraid">
		<a href="">
			<img src="banner-request-yoko.png">
		</a>
		<a href="">
			<img src="banner-reservation-yoko.png">
		</a>
	</div>

<?php wp_footer(); ?>

</body>
</html>
```

style.scss
```
.sakura{
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0;

  background-color: #fff;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .5);
  z-index: 999;

//最初は非表示
  opacity: 0;
  transform: translateY(100px);

  & a{
    max-width: 15%;
    margin: 0.5rem 0.25rem;
    transition: all 0.3s ease;

    & img{
      width: 100%;
    }
  }

  & a:hover{
    opacity: 0.5;
  }
}


//上に上がる動き
.sakura.UpMove{
  width: 100%;
  animation: UpAnime 0.5s forwards;  
}

@keyframes UpAnime {
  from{
    opacity: 0;
    transform: translateY(100px);
  }
  to{
    opacity: 1;
    transform: translateY(0px);
  }
}


//下に下がる動き
.sakura.DownMove{
  width: 100%;
  animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
  from{
    opacity: 1;
    transform: translateY(0);
  }
  to{
    opacity: 1;
    transform: translateY(100px);
  }
}
```