「位置：粘着性がある」CSSとHTMLが機能しない

スクロールした後、ナビゲーションバーを一番上に固定したいのですが、うまくいきません。理由がわかりません。あなたが助けてくれるなら、これが私のHTMLとCSSコードです：

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato",sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover{
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<nav style="position: sticky; position: -webkit-sticky;">
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

固定配置は、相対配置と固定配置のハイブリッドです。要素は、指定されたしきい値を超えるまで相対配置として扱われ、その時点で、固定配置として扱われます。
...
あなたは、の少なくとも一つでしきい値を指定する必要がありtop、right、bottom、またはleft期待通りに動作するように粘着性の位置決めのために。それ以外の場合は、相対配置と区別できません。[ ソース：MDN ]

したがって、例では、topプロパティを使用して、最後に固定する位置を定義する必要があります。

html, body {
  height: 200%;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

祖先要素にオーバーフローが設定されているかどうかを確認しoverflow:hiddenます（例：）; それを切り替えてみてください。期待よりもDOMツリーを上に移動しなければならない場合があります=）。

これはposition:sticky、子孫要素に影響を与える可能性があります。

私は同じ問題を抱えており、私はここで答えを見つけました。

要素が期待どおりに固定されていない場合、最初に確認することは、コンテナに適用されているルールです。

具体的には、親に設定されているオーバーフロープロパティを探します。：、または要素の親には使用できません。overflow: hiddenoverflow: scrolloverflow: autoposition: sticky

私が遭遇したいくつかのこと：

スティッキー要素がコンポーネント（角度など）の場合

• 「スティッキー」要素自体が、名前付きの角度付きコンポーネントなどのカスタム要素セレクタを持つコンポーネントである<app-menu-bar>場合は、コンポーネントのcssに以下を追加する必要があります。

  :host { display: block; }   

  または

  app-menu-bar  { display: block; }   // (in the containing component's css)

  特にiOS上のSafari は、角度のあるアプリケーションのdisplay:blockルート要素app-rootでさえも必要とするようです。

• コンポーネントを作成し、コンポーネント（シャドウDOM /カプセル化されたスタイル）内のCSSを定義している場合は、確認してposition: sticky「外側」セレクタに適用されている（例えば。app-menu-barデベロッパーツールで粘着性の位置を示すべきである）とないトップレベルdiv 内コンポーネント。Angularでは:host、コンポーネントのCSS のセレクターでこれを実現できます。

  :host
  {
      position: sticky;
      display: block;   // this is the same as shown above
      top: 0;
      background: red;    
  }
  

その他の

• sticky要素に続く要素の背景が塗りつぶされている場合は、次の要素を追加して、要素が下にスライドしないようにする必要があります。

  .sticky-element { z-index: 100; }
  .parent-of-sticky-element { position: relative; }
  

• スティッキ要素は、使用する場合は最初に（コンテンツの前に）、使用topする場合はその後に置く必要がありますbottom。

• overflow: hiddenwrapper要素を使用すると複雑になります。一般に、内部のsticky要素が削除されます。この質問でよりよく説明されています

• モバイルブラウザーは、オンスクリーンキーボードが表示されているときに、固定/固定されたアイテムを無効にする場合があります。正確なルールはわかりません（誰もが知っていることです）が、キーボードが表示されているときは、ウィンドウへの「ウィンドウ」のようなものを見ているので、物事を画面の実際に見える上部。

• 次のことを確認してください。

  position: sticky;

  ではなく

  display: sticky;

その他のユーザビリティの懸念

• モバイルデバイスで画面の下部に物を貼り付ける必要がある場合は注意が必要です。たとえばiPhone Xでは、スワイプ領域（ホームページに戻るため）を示す細い線が表示され、この領域内の要素はクリックできません。したがって、何かを貼り付ける場合は、ユーザーがそれをアクティブ化できることをiPhone Xで必ずテストしてください。大きな「今すぐ購入」ボタンは、人々がクリックできないのではダメです！
• Facebookに広告を掲載している場合、WebページはFacebookのモバイルアプリ内の「webview」コントロールに表示されます。特に、ビデオを表示する場合（コンテンツが画面の下半分のみで始まる場合）は、ページをスクロール可能なビューポート内に配置することにより、スティッキエレメントを完全にめちゃくちゃにすることがよくあります。電話のブラウザだけでなく、すべて動作が異なるFacebookのブラウザだけでなく、実際の広告のコンテキストでテストしてください。

これは、MarsAndBackとMiftah Mizwarからの回答の続きです。

彼らの答えは正しいです。ただし、問題の祖先を特定することは困難です。

これを非常に簡単にするには、ブラウザコンソールでこのjQueryスクリプトを実行するだけで、すべての祖先のオーバーフロープロパティの値がわかります。

$('.your-sticky-element').parents().filter(function() {
    console.log($(this));
    console.log($(this).css('overflow'));
    return $(this).css('overflow') === 'hidden';
});

祖先がoverflow: visibleCSS を変更しない場合、CSS は変更されます。

また、他の場所で述べたように、CSSでスティッキー要素にこれが含まれていることを確認してください。

.your-sticky-element {
    position: sticky;
    top: 0;
}

次のCSSを使用して機能させる必要がありました。

.parent {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    overflow: visible;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

上記がうまくいかない場合は...

すべての祖先を調べ、これらの要素のどれにもないことを確認しますoverflow: hidden。これを次のように変更する必要がありますoverflow: visible

これに遭遇してスティッキが機能しない場合-親を次のように設定してみてください：

display: unset

私のために働いた

私には明白ではなかった面白い瞬間：position: stickyDevToolsを使用して設定した場合、少なくともChrome 70 では適用されません。

貼り付けられるナビゲーションバーは、他のコンテンツを含むdivまたはセクションの中にあるべきではないようです。navbarが別のトップバーと共有しているdivからnavbarを取り出すまで、どのソリューションも機能しませんでした。以前は、共通のdivでトップバーとnavbarをラップしていました。

私のコメントから：

position:sticky どこに固執するか電話するためにcoordonateが必要です

nav {
  position: sticky;
  top: 0;
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

body {
  height: 200vh;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

FFとChrome以外のブラウザで使用するポリフィルがあります。これは、ブラウザを介していつでも実装できる、または実装できない実験的なルールです。Chromeは数年前にそれを追加してからそれを落としました、それは戻ってきたようです...しかしどれくらいの期間ですか？

最も近いものは、position：relative + coordonatesです。これをスクロールして粘着性のあるポイントに到達すると、これをJavaScriptスクリプトに変換したい場合に更新されます。

これは既に回答されているように見えますが、特定のケースに遭遇し、ほとんどの回答がそのポイントを逃しているように感じます。

overflow:hidden答えは、例の90％をカバーしています。それは多かれ少なかれ「粘着性がある」シナリオです。

ただし、スティッキー動作はコンテナの高さ内で使用するのが最適です。ウェブサイトの右の列にある、ページとともにスクロールするニュースレターフォームを考えてみてください。スティッキ要素がコンテナの唯一の子である場合、コンテナはまったく同じサイズであり、スクロールする余地はありません。

コンテナは、要素がスクロールするときに期待する高さである必要があります。私の "右列"シナリオでは、左列の高さです。これを達成する最良の方法はdisplay:table-cell、カラムで使用することです。それができず、float:right私と同じように行き詰まっている場合は、Javascriptで計算するために、左の列の高さを推測する必要があります。

私はこれが古い記事であることを知っています。しかし、最近私がポジションをいじり始めた人がいる場合は、スティッキーが便利です。

私の場合、位置を使用していました：グリッドアイテムとしてスティッキー。それは機能していなかったし、問題はオーバーフロー-x：html要素に隠されていた。私はそのプロパティを削除するとすぐにうまくいきました。body要素にoverflow-x：hiddenがあると、うまくいくように見えましたが、まだ理由はわかりません。

ここで2つの答え：

1. タグoverflowからプロパティを削除body

2. に設定height: 100%してbody、問題を修正しますoverflow-y: auto

min-height: 100% 代わりに機能しない height: 100%

私はこの記事がどのようにsticky機能するかについて多くを言うと信じています

CSS Position Stickyが実際に機能する方法 CSSポジションスティッキーには、スティッキーアイテムとスティッキーコンテナーの 2つの主要部分があります。

スティッキーアイテム  —位置で定義した要素：スティッキースタイル。要素は、ビューポートの位置が位置の定義と一致すると浮動しますtop: 0px。次に例を示します。

スティッキーコンテナー -スティッキーアイテムをラップするHTML要素です。これは、スティッキーアイテムが浮かぶことができる最大の領域です。

position：stickyの要素を定義すると、親要素が自動的にstickyコンテナとして定義されます。

スティッキー要素の実際の動作は次のとおりです。

• まずそれはしばらくの間相対的です
• その後しばらく修正されます
• 最後に、それはビューから消えます

粘着的に配置された要素は、その包含ブロックがフロールート（または要素がスクロールするコンテナー）内の指定されたしきい値（トップをauto以外の値に設定するなど）を超えるまで相対的に配置されたと見なされ、その時点で「スタック」として扱われます。 「それを含むブロックの反対側の端に出会うまで。

要素はドキュメントの通常のフローに従って配置され、上、右、下の値に基づいて、テーブルに関連する要素を含む、最も近いスクロール先祖とそれを含むブロック（最も近いブロックレベルの先祖）に対してオフセットされます。そして、左。オフセットは、他の要素の位置には影響しません。

この値は常に新しいスタッキングコンテキストを作成します。先祖が実際に最も近いスクロール先祖でなくても、「スクロールメカニズム」（オーバーフローが非表示、スクロール、自動、また​​はオーバーレイの場合に作成）を持つ最も近い先祖にスティッキー要素が「くっつく」ことに注意してください。

この例は、理解に役立ちます。

code https://codepen.io/darylljann/pen/PpjwPM

danday74の修正が機能しない場合は、親要素に高さが設定されていることを確認してください。

私の場合、2人の子供がいて、1人は左に浮き、もう1人は右に浮かんでいます。右に浮いているものをベタベタにしたかったのですが、<div style="clear: both;"></div>高さを与えるために親の最後にaを追加する必要がありました。

JSソリューションを使用しました。FirefoxとChromeで動作します。問題があれば教えてください。

html

<body>
  <header id="header">
    <h1>Extra-Long Page Heading That Wraps</h1>
    <nav id="nav">
      <ul>
        <li><a href="" title="">Home</a></li>
        <li><a href="" title="">Page 2</a></li>
        <li><a href="" title="">Page 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p><!-- ridiculously long content --></p>
  </main>
  <footer>
    <p>FOOTER CONTENT</p>
  </footer>
  <script src="navbar.js" type="text/javascript"></script>
</body>

CSS

nav a {
    background: #aaa;
    font-size: 1.2rem;
    text-decoration: none;
    padding: 10px;
}

nav a:hover {
    background: #bbb;
}

nav li {
    background: #aaa;
    padding: 10px 0;

}

nav ul  {
    background: #aaa;
    list-style-type: none;
    margin: 0;
    padding: 0;

}

@media (min-width: 768px) {

    nav ul {
        display: flex;
    }
}

js

function applyNavbarSticky() {
    let header = document.querySelector('body > header:first-child')
    let navbar = document.querySelector('nav')
    header.style.position = 'sticky'

    function setTop() {
        let headerHeight = header.clientHeight
        let navbarHeight = navbar.clientHeight
        let styleTop = navbarHeight - headerHeight

        header.style.top = `${styleTop}px`
    }

    setTop()

    window.onresize = function () {
        setTop()
    }
}

z-indexも非常に重要です。時々動作しますが、表示されません。念のため、非常に大きな値に設定してみてください。また、常に置くのではなくtop: 0、どこか（ツールバーの下）に隠れている場合は、もっと高いものを試してください。

これは私をつまずかせていたものです...私の粘着性のあるdivは別のdivの中にありました。下にスクロールします。

したがって、私の場合、sticky divの直後に、以下を追加する必要がありました。

    %div{style:"height:600px;"} 
       

（私のアプリケーションには2つのdivが並んでいます。左側に「背の高い」画像、右側に短いデータ入力フォームがあり、下にスクロールすると、データ入力フォームを画像の横にフロートさせたいのですが、フォームは常に画面上にあります。上記の「追加コンテンツ」を追加するまで機能しないため、スティッキーdivに「スライド」するものがあります

子要素で機能させるためoverflowにinitialを削除または設定する必要があるのは真ですposition: sticky。Angularアプリでマテリアルデザインを使用したところ、一部のマテリアルコンポーネントがoverflow値を変更していることがわかりました。私のシナリオの修正は

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}