CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの位置：スティッキー;

位置：スティッキー; プロパティを使用すると、スクロール位置に基づいて要素を配置できます。ユーザーが下にスクロールしたときに、要素を上部にスティッキーとして設定します。

例

次のコードを実行してCSSの位置を実装してみてください：sticky; 

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            padding: 10px;
            background-color: orange;
            border: 1px solid blue;
         }
      </style>
   </head>
   <body>
      <p>Scroll and see the effect!</p>
      <div class = "sticky">Sticky!</div>
      <div style = "padding-bottom:2000px">
         <p>This is demo text.</p>
         <p>Scroll down to view the sticky div.</p>
      </div>
   </body>
</html>

  1. CSSでスティッキー要素を作成するにはどうすればよいですか？

    CSSを使用してスティッキー要素を作成するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana

  2. 交差点オブザーバーを使用して、要素がCSS位置で固定されるタイミングを検出します：スティッキー

    スティッキーな位置の要素にさまざまなCSSスタイルを適用することで、簡単に検出できます。 次の例は、このプロパティを示しています。 例 <!DOCTYPE html> <html> <head> <style> #first {    background-color: lightgrey;    height: 10px; } #navbar-top {    background-color: lightgrey;    height: 2px; } #cont