ナビゲーションをスクロールすると追従するようにしたい

Question

よくある、一定位置にスクロールくるとナビゲーションが追従するのをやりたいと思います。
調べてみると、position:stickerとjquelyで実装する方法があるようですが、今のコードでどこを直せばいいかよくわからず質問いたしました。（jquelyは入れています）

mainvisualを基準点にして、navigationは絶対位置で下にくっ付けている状態です。
そして、スクロールするとnavigationが頭に来て、常に一番上に固定したいと思います。

勉強不足で余計なクラスをたくさんつけているかもしれませんが、教えていただければ幸いです。よろしくお願い致します。

<header>
	<ul class="bxslider">
		<li class="hero-image1">
			<img src="image/メインビジュアル1.jpeg" alt="メインビジュアル1">
		</li>
		<li class="hero-image2">
			<img src="image/メインビジュアル2.jpeg" alt="メインビジュアル2">
		</li>
		<li class="hero-image3">
			<img src="image/メインビジュアル3.jpg" alt="メインビジュアル3">
		</li>
	</ul>
	
	<div class="top-text">
		<p class="top-text-1">テキスト</p>
		<p class="top-text-2">テキスト</p>	
	</div>	


	<!--navigationエリア-->
	<div class="navigation-area">
		<nav class="nav">
			<ul class="nav-list">
				<li class="amimoto-logo"><a href="#"><img src="image/hututarogo.png" alt="navロゴ" class="nav-logo"></a></li>
				<li class="nav-list-item"><a href="#">お料理</a></li>
				<li class="nav-list-item"><a href="#">客室</a></li>
				<li class="nav-list-item"><a href="#">観光スポット</a></li>
				<li class="nav-list-item"><a href="#">網元レンタカー</a></li>
				<li class="nav-list-item"><a href="#">アクセス</a></li>
				<li class="nav-list-item nav-yoyaku"><a href="#" class="white">宿泊予約</a></li>
			</ul>
		</nav>
	</div>	
	<!--/navigationエリア-->
</header>	
コード

/*header*/
	/*main-visual*/
	.hero-image1 >img{
		height:100vh;
		width:100%;
		position: relative;
		display: none;
	}
	.hero-image2 >img{
		height:100vh;
		width:100%;
		position: relative;
		
	}
	.hero-image3 >img{
		height:100vh;
		width:100%;
		position: relative;
		display: none;
	}
	/*main-visual*/

	/*main-visual-text*/
	.top-text{
		position: absolute;
		top:130px;
		left:0;
	}
	.top-text-1{
		margin-bottom: 10px;
		background-color: #fff;
		font-size:3.2rem;
		letter-spacing: 0.25em;
		font-weight: 300;
		padding: 15px;
	}
	.top-text-2{
		background-color: #fff;
		font-size:3.2rem;
		letter-spacing: 0.25em;
		font-weight: 300;
		padding: 15px;
	}
	/*main-visual-text*/

	/*navigation*/
	.navigation-area{
		height: 88px;
		background-color: #fff;
		box-shadow: 0 0px 1px 0px gray;
		position: absolute;
		bottom:0;
		width: 100%;
	}
	.amimoto-logo{
		width: 20%;

	}
	.nav-logo{
		width: 100%;
	}
	.nav-list{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 88px;
	}
	.nav-list-item{
		font-size:1.8rem;
		letter-spacing: 0.2em;
		font-weight: 500;
		margin-left: 40px;
	}
	.nav-yoyaku{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 196px;
		height: 88px;
		background-image: url("../image/1677901_s.jpg");
		letter-spacing: 0.2em;
	}
	/*navigation*/
/*/header*/
コード

Comments

[miyabi_pudding]

まずは自分でどちらかでもやってみたのでしょうか？
position:stickerかjquelyです。

そこまで調べがついているのなら、
その参考にした記事があると思うので、その記事通りまずやればいいかと思うのですが・・・。

Answer 1

    .navigation-area{
        height: 88px;
        background-color: #fff;
        box-shadow: 0 0px 1px 0px gray;
        position: absolute;
        bottom:0;
        width: 100%;
    }

↓

    .navigation-area{
        height: 88px;
        background-color: #fff;
        box-shadow: 0 0px 1px 0px gray;
        position: fixed;
        bottom:0;
        width: 100%;
    }

Comments

[退会済みユーザー]

回答ありがとうございます。
ちょっと方向性が違うのですが、固定したナビゲーションは画面上部に固定したいです。つまりこの状態だと下に固定され続けるので上に固定したいです。

しかしメインビジュアルといるときは下に位置していて良いです。
ちょと説明が難しくて申し訳ないです。