特定の位置まで来たら固定する

①前提
要素をスクロールしても同じ位置で固定し、固定位置で次の要素に変わるという動きをしたいと思っております。

私の場合は写真をスクロールし、文字を固定したいのですが、
イメージは上記URLの　01. Fixed Images That Fades as You Scroll　です。

②実現したいこと
URLの通りに書きましたが、footerの前にも、他の要素がある為、スクロールされた要素が止まらずに下の要素と被ってしまいます。
（スクロールイベントの一番下まで来た際に、文字を固定を固定したい）

ヘッダー
↓
画像
↓
スクロールイベント（右：写真スクロール　左：文字固定）
↓
画像
↓
フッター

言葉足らずで大変申し分けないのですがご教示いただけると幸いです。
何卒、宜しくお願いいたします。

HTML
1
2
3
4<div class="top">
5   <h1>サンプル</h1>
6   <img src="" />
7</div>  
8
9
10
11
12  <div class="wrapper"></div>
13
14<div class="section">
15<div class="section__text">
16<div class="section__text__inner section__box">
17
18<h2>サンプル</h2>
19<h3>サンプル</h3>
20<p class="fixed_heading">説明 説明 説明</p>
21<p>説明 説明 説明</p>
22</div>
23</div>
24
25
26<div class="section__body">
27<div class="section__img">
28<section class="sec">
29<img src="" />
30</section>
31<section class="sec">
32<img src="" />
33</section>
34<section class="sec">
35<img src="" />
36</section>
37</div>
38</div>
39</div>
40
41<!--------二段目--------->
42
43<div class="section">
44<div class="section__text">
45<div class="section__text__inner section__box">
46
47<h2>サンプル</h2>
48<h3>サンプル</h3>
49<p class="fixed_heading">説明 説明 説明</p>
50<p>説明 説明 説明</p>
51</div>
52</div>
53
54
55<div class="section__body">
56<div class="section__img">
57<section class="sec">
58<img src="" />
59</section>
60<section class="sec">
61<img src="" />
62</section>
63<section class="sec">
64<img src="" />
65</section>
66</div>
67</div>
68</div>
69
70
71<div class="category">
72   <img src="" />
73</div>  
74
75
76<footer>
77</footer>
78
79

CSS
1.wrapper {
2position: fixed;
3top: 0;
4left: 0;
5width: 100%;
6height: 100%;
7z-index: 1;
8}
9
10.section {
11display: flex;
12justify-content: space-between;
13z-index: 2;
14position: relative;
15width: 100%;
16}
17
18.section__text {
19position: relative;
20display: flex;
21}
22
23
24.section__text__inner {
25position: fixed;
26left: 0%;
27width: 35%;
28height: 100vh;
29margin: 0 auto;
30top: 0%;
31mix-blend-mode: multiply;
32background-size: contain;
33background-repeat: no-repeat;
34transition: filter .6s ease, opacity .6s ease, background-position 0.5s ease;
35filter: blur(10px);
36
37}
38
39
40.section__box {
41visibility: hidden;
42}
43
44
45
46.section__text img {
47object-fit: cover;
48}
49
50
51.section.active .section__text__inner {
52opacity: 1;
53visibility: visible;
54background-position: 50% 50%;
55filter: blur(0);
56}
57
58
59.section__body {
60width: 50%;
61}
62
63.section__img {
64width: 940px;
65object-fit: cover;
66}
67
68 
69

JS
1  $(window).scroll(function() {
2  
3  // selectors
4  var $window = $(window),
5      $body = $('body'),
6      $panel = $('.section');
7  
8  // Change 33% earlier than scroll position so colour is there when you arrive.
9  var scroll = $window.scrollTop() + ($window.height() / 3);
10 
11  $('.section').removeClass('active');
12  
13  $panel.each(function () {
14    var $this = $(this);
15    
16    // if position is within range of this panel.
17    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
18    // Remember we set the scroll to 33% earlier in scroll var.
19    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
20      $this.addClass('active');
21
22    }
23  });    
24  
25}).scroll();
26
27
28
29

Lhankor_Mhy

2022/05/26 00:33

HTMLをご提示ください。

aaa_tttt

2022/05/26 01:48

分かりづらくて申し訳ありません.... ご教示いただけると幸いです。宜しくお願いいたします。 // HTML　// <div class="wrapper"></div> <div class="section"> <div class="section__text"> <div class="section__text__inner section__box"> <h2>サンプル</h2> <h3>サンプル</h3> <p class="fixed_heading">説明説明説明</p> <p>説明説明説明</p> </div> </div> <div class="section__body"> <div class="section__img"> <section class="sec"> <img src="" /> </section> <section class="sec"> <img src="" /> </section> <section class="sec"> <img src="" /> </section> </div> </div> </div>  <div class="section"> <div class="section__text"> <div class="section__text__inner section__box"> <h2>サンプル</h2> <h3>サンプル</h3> <p class="fixed_heading">説明説明説明</p> <p>説明説明説明</p> </div> </div> <div class="section__body"> <div class="section__img"> <section class="sec"> <img src="" /> </section> <section class="sec"> <img src="" /> </section> <section class="sec"> <img src="" /> </section> </div> </div> </div> 　// CSS　// .wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100％; z-index: 1; } .section { display: flex; justify-content: space-between; z-index: 2; position: relative; width: 100%; } .section__text { position: relative; display: flex; } .section__text__inner { position: fixed; left: 0%; width: 35%; height: 100vh; margin: 0 auto; top: 0%; mix-blend-mode: multiply; background-size: contain; background-repeat: no-repeat; transition: filter .6s ease, opacity .6s ease, background-position 0.5s ease; filter: blur(10px); } .section__box { visibility: hidden; } .section__text img { object-fit: cover; } .section.active .section__text__inner { opacity: 1; visibility: visible; background-position: 50% 50%; filter: blur(0); } .section__body { width: 50%; } .section__img { width: 940px; object-fit: cover; }

recal

2022/05/26 06:16

質問は編集出来きますよー。

aaa_tttt

2022/05/26 06:47

編集いたしました。ご指摘ありがとうございます...！

Lhankor_Mhy

2022/05/26 07:57

ご提示のコードを試してみましたが、起きている問題が今ひとつ理解できませんでした。テキスト表示はスクロールに応じて変更されているように見えます。

aaa_tttt

2022/05/26 08:59

お返事ありがとうございます。1段目のsectionが表示される→2段目の要素に同じ位置で変わる→sectionの一番下までスクロールされたら消える。という動きをやりたいと思っております。参考サイトはヘッダーの距離から位置を取得しているため、同じように書くとsectionの下の要素までスクロールが続きはみ出てしまいます。ヘッダーとフッダーの距離を取得するやり方ではなく、sectionまで（特定要素まできたら）表示するやり方はありますでしょうか。

Lhankor_Mhy

2022/05/26 09:10

「はみ出てしまう」という現象のイメージができないでいます。「どこ」から「なに」がはみ出ているのか、もう少し詳しく教えていただけますか？

aaa_tttt

2022/05/26 09:25

説明足らずで申し訳ないです... section一段目、二段目の下に別のクラスで画像を表示させており(footerとは別です)、その画像にsectionの二段目の文字がはみ出てしまっています。

Lhankor_Mhy

2022/05/27 01:42

ご提示のコードではその現象が確認できない状態です。実は、aaa_ttttさんが実行しているコードはご提示のコードとは異なる、などということがあるのではないでしょうか？実際のコードではテキストがもっと多い、などの違いがあるのではないですか？

aaa_tttt

2022/05/27 06:30

分かりづらくて申し訳ありません..HTMLを編集させていただきました。sectionの前後には他のクラスでコンテンツがあります。ヘッダーとフッターの前後にあります。