質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1330閲覧

position: stickyについて

ahiru3

総合スコア12

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/05/01 20:54

下記動画を見てcssの勉強をしているのですが。
[Sticky Text Full Page Scrolling Effects]
(https://www.youtube.com/watch?v=rVFbqBxiTJI)

position: sticky;が適用できないです。
何か原因はあるのでしょうか。

よろしくお願いします。

*position: -webkit-sticky;をコメントアウトしても同じ結果になります。

html

1<html lang="ja"> 2 <head> 3 <meta charset="utf-8"> 4 <title>Scroll Effect</title> 5 <link rel="stylesheet" type="text/css" href="style.css"> 6 </head> 7 <body> 8 <section class="banner"> 9 <div class="container"> 10 <div class="sec"> 11 <h3>Scroll Down</h3> 12 </div> 13 <div class="sec"></div> 14 <div class="sec"></div> 15 <div class="sec"></div> 16 <div class="sec"></div> 17 <div class="sec"></div> 18 <div class="sec"></div> 19 <div class="sec"></div> 20 <div class="sec"></div> 21 <div class="content"> 22 <h2> 23 <span style="--i:1;">R</span> 24 <span style="--i:2;">y</span> 25 <span style="--i:3;">u</span> 26 <span style="--i:4;">u</span> 27 <span style="--i:5;">b</span> 28 <span style="--i:6;">o</span> 29 <span style="--i:7;">k</span> 30 <span style="--i:8;">u</span> 31 </h2> 32 </div> 33 <div class="sec"> 34 <h3>Thanks For Watching...</h3> 35 </div> 36 </div> 37 </section> 38 </body> 39</html>

css

1@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); 2* 3{ 4 margin: 0; 5 padding: 0; 6 box-sizing: border-box; 7 font-family: 'Poppins' , sans-serif; 8} 9.container 10{ 11 position: relative; 12 width: 100%; 13 height: 100&; 14 overflow: auto; 15 scroll-behavior: smooth; 16 scroll-snap-type: y mandatory; 17} 18.sec 19{ 20 position: relative; 21 width: 100%; 22 height: 100vh; 23 display: flex; 24 justify-content: center; 25 align-items: center; 26 background: #f00; 27 scroll-snap-align: center; 28} 29h3 30{ 31 color: #fff; 32 font-size: 10vw; 33 text-align: center; 34 margin: 0 50px; 35} 36.sec:nth-child(1) 37{ 38 background: url(bg1.jpg); 39 background-size: cover; 40 background-attachment: fixed; 41 background-position: center; 42 background-blend-mode: multiply; 43} 44.sec:nth-child(2) 45{ 46 background: url(bg2.jpg); 47 background-size: cover; 48 background-attachment: fixed; 49 background-position: center; 50 background-blend-mode: multiply; 51} 52.sec:nth-child(3) 53{ 54 background: url(bg3.jpg); 55 background-size: cover; 56 background-attachment: fixed; 57 background-position: center; 58 background-blend-mode: multiply; 59} 60.sec:nth-child(4) 61{ 62 background: url(bg4.jpg); 63 background-size: cover; 64 background-attachment: fixed; 65 background-position: center; 66 background-blend-mode: multiply; 67} 68.sec:nth-child(5) 69{ 70 background: url(bg5.jpg); 71 background-size: cover; 72 background-attachment: fixed; 73 background-position: center; 74 background-blend-mode: multiply; 75} 76.sec:nth-child(6) 77{ 78 background: url(bg6.jpg); 79 background-size: cover; 80 background-attachment: fixed; 81 background-position: center; 82 background-blend-mode: multiply; 83} 84.sec:nth-child(7) 85{ 86 background: url(bg7.jpg); 87 background-size: cover; 88 background-attachment: fixed; 89 background-position: center; 90 background-blend-mode: multiply; 91} 92.sec:nth-child(8) 93{ 94 background: url(bg8.jpg); 95 background-size: cover; 96 background-attachment: fixed; 97 background-position: center; 98 background-blend-mode: multiply; 99} 100.sec:nth-child(9) 101{ 102 background: url(bg9.jpg); 103 background-size: cover; 104 background-attachment: fixed; 105 background-position: center; 106 background-blend-mode: multiply; 107} 108.sec:nth-child(11) 109{ 110 background: url(bg10.jpg); 111 background-size: cover; 112 background-attachment: fixed; 113 background-position: center; 114 background-blend-mode: multiply; 115} 116 117.content 118{ 119 position: absolute; 120 top: 0; 121 width: 100%; 122 text-align: center; 123} 124.content h2 125{ 126 position: relative; 127 display: flex; 128 justify-content: center; 129} 130.content h2 span 131{ 132 position: -webkit-sticky; 133 position: sticky; 134 top:0; 135 line-height: 100vh; 136 height: 100vh; 137 color: #fff; 138 font-size: 14vw; 139 margin-top: calc(100vh * var(--i)); 140} 141

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Rwight

2021/05/01 21:36 編集

自分は上手く説明はできませんが何となく自分の言葉に変えたら 「要素は文書の通常のフローに従って配置になっていて。(フローの意味:流れや流動という意味。) top, right, bottom, left, z-index 指定しても効果がありません。その意味が既定値です。」 詳しくはここから https://developer.mozilla.org/ja/docs/Web/CSS/position つまり position: stickyはtopとか指定しても変化がなし、即定値です。 この即定値とは 「ユーザーが何も操作や設定を行っていない場合に使用される、あらかじめ組み込まれた初期設定のことである。」 つまり ユーザー(我々)がこのposition: sticky;と打てば初期に設定されていたものになると言う事です。 (もし説明が上手く伝わってなかったらすみません。。。)
ahiru3

2021/05/01 21:36

すいません。 cssの.content h2 spanの部分のtop: 0;ここのことでしょうか?
Rwight

2021/05/01 21:47 編集

自分もまだまだ勉強途中ですが、多分最初にposition: sticky;と打った後にそこで初期のものが指定されるから、top: 0; も多分ですが、自動的にposition: sticky;でしてtopも指定されていると思いますが(予想です) 本当のことはプロの人達に聞いてみてください。(自分からも宜しくお願いします。) 本当の助けにならないで申し訳ありません。m(_ _)m。 (こう言う初心者が教えられても間違いがあるかもしれませんのでこちらで書かせていただきました。)
ahiru3

2021/05/02 02:11

ありがとうございます。 height: 100%;直しましたが正しく動作しませんでした。 stickyが聞いていないような感じです。
guest

回答2

0

ベストアンサー

height: 100&;
上記を
height: 100%;
に修正すれば動作します。

文法間違いを指摘してくれるプログラミング用エディター(VSCode, Atomなど)を使うとこのようなミスは低減できます。

投稿2021/05/02 01:13

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ahiru3

2021/05/02 02:12

ありがとうございます。 上記修正しましたが狙った動作ができませんでした。 position: sticky; がうまく作用していないようです。
ahiru3

2021/05/02 02:33

確認いたしました。 現状サンプルの動きになっているのですが、 動画の11分ぐらいのところが完成ページになるのですが、 狙っている動きが違うのです。すいません。
ahiru3

2021/05/02 21:10

できました。 position: sticky; は親要素に注意しないといけないようですね。 解決しました。 ありがとうございます。
guest

0

URL

詳しくの説明はここでお願いします。
position: stickyについての質問
質問者さんが無事問題を解決しますように・・・
皆さん大変申し訳ありませんでした。

投稿2021/05/01 21:59

編集2021/05/02 08:15
Rwight

総合スコア63

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/05/01 22:30

細かくて申し訳ないですが、あまり回答とは関係ないので「前提」「最後」はなくてもいいと思います。本筋より長いので本筋や意図が伝わらない可能性があります。
Rwight

2021/05/02 07:24

皆さん大変申し訳ありませんでした 今後気おつけます。。
m.ts10806

2021/05/02 08:11

質問と同じく回答は編集できますよ。
Rwight

2021/05/02 09:30 編集

回答の仕方が下手で申し訳ありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問