htmlとCSSについて

仕事場で1人サイトを作ってます。

画面スクロールに伴い、途中から途中までの
要素の固定スクロールについて上手く出来ないので教えていただきたいです。


やりたい仕様としては
①画面をスクロールすると、画像と｢画像に乗った途中まで固定スクロールしたい要素｣が出てくる。

②画面スクロールを続けると、画像を置いて要素のみが画面内に留まり、一緒にスクロールされる。(ここまではできた。)

③要素の固定スクロールは次の｢画像に乗った途中まで固定スクロールしたい要素｣のところまでつづく。(これができません。)



③の出来る方法が知りたいです。
｢画像に乗った途中まで固定スクロールしたい要素｣というのは、ページ内での項目名みたいなもので、その項目の間は画面上に項目名を固定したい。
次の項目が来たら、項目名は縦方向には同じ位置にいるので、バトンタッチするように
固定する項目名が変わる。
ということがしたいのです。



現在、画像の上に、要素をposition:absolute指定で乗せています。
そしてさらに
position:sticky;
を指定することで、
画面スクロールに従い、
要素が出てきてから、画像をその場に置いて要素の途中までスクロールすることができました。
このposition2つは要素のクラス名に入っています(このクラス名で、要素の四角の大きさと、fontも指定してます。)

ですが、その｢途中｣が早い段階で途切れてしまいます。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2020/11/06 15:26

こんにちは

文章だけからでは、ほとんどイメージが掴めないので、回答にはなっていないと思いますが、何かのヒントにでもなれば・・・


想像するところ、
『画像とタイトル（その他にも文章等があるのかも知れませんが）があって、画像の上にタイトルが重なっている』
というような同じ構成のものが複数連続してあるのだろうと考えました。

・・・で、そのタイトル部分だけをstickyにして、次の「画像+タイトル」までスクロールするようにしたいということかと推測しました。
（違っている場合は、以下は無視してください）


＞現在、画像の上に、要素をposition:absolute指定で乗せています。
＞そしてさらにposition:sticky;を指定することで、～
absoluteとstickyの両方を同時に指定はできないと思いますけれど？

どうせなら、画像（大きいのかアイコン的なものなのかもわかりませんが）を親要素の背景画像にしておけば、absoluteの設定は不要になるでしょうし、タイトル部分は親要素の範囲内で簡単にstickyに移動することができるはずです。

あるいは、固定位置になっている画像の方をabsoluteにしておいて、z-indexを小さくすることでタイトルの背面に置くことでもできそうに思います。
あとは同様ですね。

全体がもっと複雑な構成になっていて、一筋縄ではいかないというような場合には、javascriptを併用するという方法も考えられるとは思いますけれど・・・