1

CSSでstickyを指定しているのですが、うまく動きません。
以下にcodepenに簡易的なソースを置いておりますが、

potision: sticky;
bottom: 0;

の場合はこのプログラムはうまく動くのですが、

potision: sticky;
top: 0;

の場合はtopが0の時に固定されません。
うまく動作しない理由が知りたいです。

top:0;bottom:0;を組み合わせたいので、両方つけても動くようにしたいです。

回答をお待ちしております。

[これがcodepenのURLです]
https://codepen.io/abinitio/pen/PgrgVX

body {
  color: #fff;
  font-family: arial;
  font-weight: bold;
  font-size: 40px;
}

.main-container {
  max-width: 600px;
  margin: 0 auto;
  border: solid 10px green;
  padding: 10px;
  margin-top: 40px;
}

.main-container * {
  padding: 10px;
  background: #aaa;
  border: dashed 5px #000;
}

.main-container *+* {
  margin-top: 20px;
}

.main-header {
  height: 50px;
  background: #aaa;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.main-content {
  min-height: 1500px;
}

.main-content2 {
  min-height: 500px;
}

.main-footer {
  position: -webkit-sticky;
  position: sticky;
  /*   top:0; */
  bottom: 0;
  border-color: red;
}
<div>
  <div style="float:left">
    <main class="main-container">
      <header class="main-header">HEADER</header>
      <footer class="main-footer">FOOTER</footer>
    </main>
    <br><br><br><br>
  </div>
  <div style="float:left">
    <div class="main-content">MAIN CONTENT</div>
  </div>
  <div style="float:right">
    <main class="main-container">
      <header class="main-header">HEADER</header>
      <div class="main-content2">MAIN CONTENT</div>
      <footer class="main-footer">FOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTER</footer>
    </main>
    <br><br><br><br>
  </div>
</div>

1 件の回答 1

2

質問文のコードで、粘着配置要素に対して top: 0 を指定した場合、画面を読み込んだ状態では閾値を越えていないため、要素は相対配置されます。次に、 bottom: 0 を指定した場合に、画面を読み込んだ状態では、常に閾値を超えている状態のため、要素が固定配置されます。


つまり、質問文のコードで top を指定した場合の動作は、粘着配置要素の下にそれ以上スペースが存在しないため、その指定がされていないかのように見えます。この動作は、 top を指定した場合のコードで、粘着配置要素の下にスペースを作成することで確認出来ます。

body {
  color: #fff;
  font-family: arial;
  font-weight: bold;
  font-size: 40px;
}

.main-container {
  max-width: 600px;
  margin: 0 auto;
  border: solid 10px green;
  padding: 10px;
  margin-top: 40px;
}

.main-container * {
  padding: 10px;
  background: #aaa;
  border: dashed 5px #000;
}

.main-container *+* {
  margin-top: 20px;
}

.main-header {
  height: 50px;
  background: #aaa;
}

.main-content {
  min-height: 1500px;
}

.main-content2 {
  min-height: 500px;
  height: 150vh;
}

.main-footer {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  border-color: red;
}

.box {
  height: 150vh;
}
<div>
  <div style="float:left">
    <main class="main-container">
      <header class="main-header">HEADER</header>
      <footer class="main-footer">FOOTER</footer>
    </main>
    <br><br><br><br>
  </div>
  <div style="float:left">
    <div class="main-content">MAIN CONTENT</div>
  </div>
  <div style="float:right">
    <main class="main-container">
      <header class="main-header">HEADER</header>
      <div class="main-content2">MAIN CONTENT</div>
      <footer class="main-footer">FOOTER</footer>
      <div class="box">BOX</div>
    </main>
    <br><br><br><br>
  </div>
</div>


参考:

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。