固定追従のナビゲーションをスクロールの途中から表示したい

固定されたナビゲーション（追従）をスクロール途中から表示させたい

画面を下にスクロールするとある位置からナビゲーションが表示されるようにしたい
表示された後、上にスクロールするとまたナビゲーションが消えるようにしたい

以上が実現したいことです。

HTMLとCSSとBootstrapだけでは実装不可能なのか？
jQueryなどを使ってどのように実装できるのか？

以上が知りたいことです。

当方のjQueryの知識はほとんどなく、ググってみましたが全く実装できずに困ってしまったので、ここで質問させていただきました。

html
1  <!-- スマホ追従nav -->
2      <ul class="articles-scroll nav left-items align-items-center" id="articles-scroll">
3        <li class="nav-item"><a class="nav-link text-right" href="#"><img src="img/air-icon.png" class="w-50" alt=""></a></li>
4        <li class="nav-item active"><a class="nav-link nav-link-style font-weight-bold pb-0 mb-2" href="#">基本情報</a></li>
5        <li class="nav-item"><a class="nav-link nav-link-style font-weight-bold pb-0 mb-2" href="#">準備</a></li>
6        <li class="nav-item"><a class="nav-link nav-link-style font-weight-bold pb-0 mb-2" href="#">安全対策</a></li>
7        <li class="nav-item"><a class="nav-link nav-link-style font-weight-bold pb-0 mb-2" href="#">マネープラン</a></li>
8      </ul>
9  <!-- スマホ追従navここまで -->
10    <script>
11        $(function () {
12            $(window).scroll(function () {
13                if ($(this).scrollTop() > 10) {
14                    $('#articles-scroll').addClass('is-fixed');
15                } else {
16                    $('#articles-scroll').removeClass('is-fixed');
17                }
18            });
19        });
20    </script>

CSS
1.is-fixed {position: fixed; top: 0; left: 0; z-index: 1100; width: 100%;}

なお、jQueryとCSSの読み込みの記述はしてあります。

Bootstrapが邪魔をしている可能性などあるのでしょうか？

よろしくお願いいたします。

s8_chu

2019/04/07 20:26

質問者さんが使用している Bootstrap のバージョンを教えていただけませんか？

caramel_sau

2019/04/07 20:37

バージョンは、Bootstrap4になります。記述してなくてすみません。

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLとCSSとBootstrapだけでは実装不可能なのか？

とある要素の領域内でのみナビゲーションを固定表示するためには、 sticky-top クラスを使うことが出来ると思います。しかし、上にスクロールするときにナビゲーションが消えるという動作は、 HTML, CSS, Bootstrap のみでは不可能だと思います。

jQueryなどを使ってどのように実装できるのか？

質問者さんの実現したいことは、 jQuery を使う場合、以下のように行うことが出来ると思います(動作確認用リンク)。

jQuery
1$(function () {
2  var scrollPosition = 0;
3  $(window).scroll(function () {
4    var scrollTop = $(this).scrollTop();
5    if (scrollTop > scrollPosition && scrollTop > $(".box:nth-of-type(2)").offset().top) {
6       $('#articles-scroll').addClass('is-fixed');
7    } else {
8       $('#articles-scroll').removeClass('is-fixed');
9    }
10    scrollPosition = scrollTop;
11  });
12});