仕事場で1人サイトを作ってます。
画面スクロールに伴い、途中から途中までの
要素の固定スクロールについて上手く出来ないので教えていただきたいです。
やりたい仕様としては
①画面をスクロールすると、画像と「画像に乗った途中まで固定スクロールしたい要素」が出てくる。
②画面スクロールを続けると、画像を置いて要素のみが画面内に留まり、一緒にスクロールされる。(ここまではできた。)
③要素の固定スクロールは次の「画像に乗った途中まで固定スクロールしたい要素」のところまでつづく。(これができません。)
③の出来る方法が知りたいです。
「画像に乗った途中まで固定スクロールしたい要素」というのは、ページ内での項目名みたいなもので、その項目の間は画面上に項目名を固定したい。
次の項目が来たら、項目名は縦方向には同じ位置にいるので、バトンタッチするように
固定する項目名が変わる。
ということがしたいのです。
現在、画像の上に、要素をposition:absolute指定で乗せています。
そしてさらに
position:sticky;
を指定することで、
画面スクロールに従い、
要素が出てきてから、画像をその場に置いて要素の途中までスクロールすることができました。
このposition2つは要素のクラス名に入っています(このクラス名で、要素の四角の大きさと、fontも指定してます。)
ですが、その「途中」が早い段階で途切れてしまいます。
No.1ベストアンサー
- 回答日時:
こんにちは
文章だけからでは、ほとんどイメージが掴めないので、回答にはなっていないと思いますが、何かのヒントにでもなれば・・・
想像するところ、
『画像とタイトル(その他にも文章等があるのかも知れませんが)があって、画像の上にタイトルが重なっている』
というような同じ構成のものが複数連続してあるのだろうと考えました。
・・・で、そのタイトル部分だけをstickyにして、次の「画像+タイトル」までスクロールするようにしたいということかと推測しました。
(違っている場合は、以下は無視してください)
>現在、画像の上に、要素をposition:absolute指定で乗せています。
>そしてさらにposition:sticky;を指定することで、~
absoluteとstickyの両方を同時に指定はできないと思いますけれど?
どうせなら、画像(大きいのかアイコン的なものなのかもわかりませんが)を親要素の背景画像にしておけば、absoluteの設定は不要になるでしょうし、タイトル部分は親要素の範囲内で簡単にstickyに移動することができるはずです。
あるいは、固定位置になっている画像の方をabsoluteにしておいて、z-indexを小さくすることでタイトルの背面に置くことでもできそうに思います。
あとは同様ですね。
全体がもっと複雑な構成になっていて、一筋縄ではいかないというような場合には、javascriptを併用するという方法も考えられるとは思いますけれど・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- iPhone(アイフォーン) 同じ写真と動画をiOSが検出する便利な機能 写真のアルバムタブにて、画面を一番下までスクロールすると 3 2023/01/23 15:41
- Windows 95・98 Windows11の設定画面がスクロールできません。 2 2023/07/26 05:16
- その他(ゲーム) 横スクロールシューティングは完全2Dだけ? 2 2023/04/04 19:39
- YouTube YouTube動画スクロール対策 あるユーチューバーの動画を最初の動画から見ているのですが1番下まで 1 2022/10/02 15:56
- Windows 10 画面上の[タスクバー]の位置の変更 1 2022/06/12 21:10
- 美術・アート デザインについての考察。 なぜ人の脳は、規則正しく連続した要素を「背景」と認識するのか、実験してみま 2 2022/04/11 21:08
- その他(プログラミング・Web制作) 「問題も答えも画像」のクイズを簡単に作れるもの何かありませんでしょうか? 1 2022/05/30 17:29
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- Android(アンドロイド) 最近Facebooの画面を下にスクロールすると画面が上にちょっと上がって、スクロールが終わった頃に降 1 2022/06/07 03:03
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
含む含まないという概念自体の...
-
角丸画像の背景色を透明にした...
-
「諸要素」とはどういう意味で...
-
HTMLページ上でiframeを最前面...
-
NからZへの全単射を具体的に構...
-
input type="hidden"で取得した...
-
aの中にspan
-
メールアドレス(グループ)の...
-
html タグの閉じスラッシュ前の...
-
質問1.
-
「にはとって代わることのでき...
-
tdに対してmin-heightの定義、...
-
ホームページビルダー16の属...
-
VBA でIE 操作 ボタンをクリッ...
-
ヘッダのメニューバーを画面の...
-
自然数と偶数の自然数は全単射...
-
vb/vb.net XMLの大量データの作...
-
smallにtext-allignが効かない
-
テキストボックスの中にリンク...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
質問1.
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
改行ほどは行かないけど、若干...
-
マージソートの計算量について-...
-
親要素・子要素
-
border: noneでボタンの境界線...
-
C言語 並び替え(配列)について
-
tdに対してmin-heightの定義、...
-
HTMLでTextareaを横に2つ並べ...
-
テキストボックスの中にリンク...
-
CSSで改行後の行間調整
-
H1タグを画像にしたい
-
ある要素の中身を全部グレーア...
おすすめ情報