JavaScript サイドバー追従が思うように行きません

※少々急ぎです。言葉足らずのところがあるかもしれませんが、
都度聞いていただければと思います

お世話になっております。
表題についてです。

添付画像のようなレイアウトのwebサイトを作成しています。
グロナビを左におき、スクロールをすると追従させようと思っています。

私が実装しようとしているのは、下スクロール時に
グロナビを追従スクロールさせ、グロナビの底辺の高さと、Content3の底辺の高さが
一致した時にグロナビの追従スクロールを止め(position : relative)、上スクロール時に
再度グロナビをposition : fixedさせたいと思っています。

しかし、なぜか下スクロール時に
グロナビの底辺の高さと、Content3の底辺の高さが一致した時にスクロールは止まらず、
上スクロール時にスクロールが止まってしまいます。

~~午前中から粘っていたものの、どうもうまくいかなくて心が粉砕してしまいそうです。~~

ソースコードは下記のようになります。

javascript
1// 左サイドバースクロール
2	window.addEventListener( "DOMContentLoaded", function(){
3		
4		var gloNavFixed = document.getElementById( "gloNavFixed" );
5		var content3 = document.getElementById( "content3" );
6		
7		window.addEventListener( "scroll", function(){
8			
9			var content3Btm = content3.getBoundingClientRect().bottom + window.pageYOffset;
10			var gloNavFixedBtm = gloNavFixed.getBoundingClientRect().bottom + window.pageYOffset;
11			
12			if( content3Btm < gloNavFixedBtm ){
13				
14				gloNavFixed.className = "gloNav__inner-r";
15				gloNavFixed.style.top = window.pageYOffset + "px";
16				
17			}
18			
19		} );
20		
21		
22	} );

css
1.gloNav__inner-f{
2	position:fixed;
3	top:0;
4	height:96vh; 
5	border-radius:0 5px 5px 0;
6	background-color:#ffffff;
7}
8.gloNav__inner-r{
9	position:relative;
10	height:96vh; 
11	border-radius:0 5px 5px 0;
12	background-color:#ffffff;
13}

それでは、どうぞ宜しくお願いいたします。

******* 追記 *******
期待した回答以外のものが来ていましたね(笑)
変な印象を与えてしまう書き方をして大変申し訳ございませんでした。
とはいえ、見返したところ回答する上で必要な情報は揃っているかと思いますので
引き続き宜しくお願い致します。

一応内容的に文章のみではイメージの付きづらいものかと思い、図も作成した次第です。
それでも、不足分があれば文頭に記載しているように
ご質問いただければお答え致します。

どうかお力添えいただければと思います。

******* 追記２ *******
承知しました。
ご指摘のように自分の中では必要な情報は揃え、
期待した回答が得られる文章としては十分であろうと判断していました。

とはいえ結果的に、余計な言葉などが発端でやりとりしている内容がそれ以前のものです。
これ以上はどうすることもできないと思いますので、当質問については自力でなんとかします。

ご指摘いただいた皆様についても
お時間を割いていただき誠にありがとうございました。

******* 追記3 *******

@mts10806
そんなに牙を向けないでください。

もちろん、htmlなどもあります。
ただ、当質問ではhtmlのソースコードはあまり重要ではありません。
(html構造ならイメージしやすいよう図を作成しました。)

htmlに必要なid名があれば、この質問についてはレベルが高い方であればわかると思いますし、
実際JavaScriptのソースコードを見ればわかると思います。
重要でないソースコードを記載する事こそ、余計に問題をややこしくさせると思います。

とりあえず当質問については自分でなんとかします。

ありがとうございました。

defghi1977

2018/04/17 06:33

https://teratail.com/help/question-tips 急ぎだとか心が折れそうだとか回答する上で知ったことではないので, 質問の要点だけを丁寧かつ正確に記述するようにして下さい

m.ts10806

2018/04/17 06:40 編集

その「午前中粘った」ことが何なのか分からないので「丸投げ」という評価を受けているんじゃないかなと。（私は投じてませんが）　質問を要約すると「こういうことしたい、今こうなってる、どうしたらいい？」だけです。

m.ts10806

2018/04/17 06:59

回答する上で必要な情報が揃っているかどうかを判断するのは回答者であって質問者ではありません。揃っていないから指摘を受けるのです。揃っているという認識であれば自己解決できるのではないでしょうか？期待した回答があるのなら、自身でそれを書けば良い話です。defghi1977さんも指摘されているように「知ったことではない」です。

m.ts10806

2018/04/17 07:06 編集

気づかないようなので。　javascriptとcssだけでサイトができているんですか？　今質問にあるものだけが全てなら他人に回答は無理ですね。そこまでの超能力者がいればいいですが。

m.ts10806

2018/04/17 07:28 編集

もう一度伝えておきます。回答する上で必要な情報が揃っているかどうかを判断するのは回答者であって質問者ではありません。「不要だ」と質問者の自己判断で切り捨てた情報が実は重要だったということは幾らでもあります。そのための「追記・修正の依頼」の場です。質問する立場での自己判断による取捨選択はそれこそ解決からご自身を遠ざけ、余計に問題をややこしくさせます。レベルが高い方ほど、細心の注意で回答をするため、どのような些細な情報であっても求めます。「急ぎである」「心が粉砕」などというコメントこそ不要です。牙を向けているのではなく、defghi1977さんのコメントそのままで、「余計なことをつらつらと長々と書くのではなく必要な情報をきちんと提示してください」ということだけです。

退会済みユーザー

2018/04/17 07:27

当質問は第３者に有益にならないと判断したので、削除依頼を出しました。

Zuishin

2018/04/17 07:29

html は必要です。レベルの高い方の作る html とあなたの作った html は違うので全体として違うものになります。同じスクリプトでも html が異なれば動きません。それはともかく回答を締め切ったなら自己解決してください。

m.ts10806

2018/04/17 07:30 編集

https://teratail.com/help/delete-policy　どれにも該当しません。自身で回答を書き、自己解決としてください。削除依頼は自由に出せるとしても、削除妥当かを判断するのは運営であり、運営が従うのは運営が定めたルールです。質問者判断のみで達成できるものではありません。

dit.

2018/04/17 07:52

退会しちゃったようなのでもう見てないかもしれませんが、スタートラインを合わせるために最低限のソースを希望しただけですよ。急いでいたのならなおさら、「都度聞く」という手間を減らす必要があったのではないでしょうか。

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

回答2件

例えばposition:sticky;を使ってこんな感じ.

HTML
1<div id="contents">
2	<nav>
3		ナビ
4	</nav>
5	<main>
6		<article>記事</article>
7		<article>記事</article>
8		<article>記事</article>
9	</main>
10</div>
11<footer>
12フッター
13</footer>

CSS
1#contents{
2	--top-margin: 100px;
3	--left-margin: 100px;
4}
5nav{
6	position: sticky;
7	float: left;
8	top: var(--top-margin);
9	left: 0;
10	width: var(--left-margin);
11	height: calc(100vh - var(--top-margin));
12	background-color: pink;
13}
14main{
15	margin-left: var(--left-margin);
16}
17article{
18	height: 500px;
19}
20footer{
21	height: 500px;
22}
23main,nav,main,article,footer{
24	box-shadow: 0px 0px 0px 1px black inset;
25}