web-dev-qa-db-ja.com

CSS位置のスティッキーがスティッキングを停止したとき

X軸スクロールでposition: stickyが機能する理由を考えていましたが、画面幅の最初の幅を超えてスクロールすると、「sticky div」が動かなくなります。

この例では、左側に固定された左側のサイドバーがあります（実際のプロジェクトでは、left-divとright-の両方を使用しているため、position: fixedまたはposition: absoluteを使用できないことに注意してください） divはy軸に沿って上下にスクロールする必要があるため、左側のスティックのみが必要です）

私が定義できる追加のCSSパラメータがありますか？

left-sticky-distance=999999%

またはそのような何か？

以下に示すいくつかのテストコード

    <html>


    <body>

    <div style='
    position:sticky;
    z-index:1;
    left:0;
    width:100px;
    height:200px;
    overflow: hidden;
    background-color:#ff0000;
    opacity:0.8;
    >

    </div>

      <div style='position:absolute; top:10;left:10; width:200; height:50px; background-color: blue'>B</div>
      <div style='position:absolute; top:10;left:110; width:200; height:50px; background-color: blue'>C</div>
      <div style='position:absolute; top:10;left:210; width:200; height:50px; background-color: blue'>D</div>
    </body>
    <html>
cssstickyboundary
7
user1709076

この質問： https://stackoverflow.com/a/45530506 が問題に回答します。

「sticky div」が画面の端に到達すると、それは親要素のビューポートの最後になります。これにより、スティッキー要素が停止し、親のビューポートの端に留まります。このコードペンは例を提供します： https://codepen.io/anon/pen/JOOBxg

#parent{
      width: 1000px;
      height: 1000px;
      background-color: red;
}
#child{
      width: 200px;
      height: 200px;
      background-color: blue;
      position: sticky;
      top: 0px;
      left: 0px;
}
body{  
      width: 3000px;
      height: 3000px;
}
<html>
  <div id="parent">
    <div id="child">
    </div>
  </div>
</html>
8
Anthony Bauer

以下のようにheight: auto;を本文のCSS属性に追加すると、この自動非表示の問題が修正されます。

body {
    background: #fff;
    color: #444;
    font-family: "Open Sans", sans-serif;
    height: auto;
}

お役に立てれば幸いです。 :)

2
Waldeinsamkeit