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

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, sans-serif;
      margin: 0px;
      padding: 0px;
      height: 150vh; /*To produce scroll bar*/
   }
   div.sticky {
      position: sticky;
      top: 0;
      background-color: rgb(52, 21, 110);
      color: white;
      padding: 50px;
      font-size: 20px;
   }
</style>
</head>
<body>
<h1>Sticky Element Example</h1>
<h2>Random Header Text</h2>
<h2>Randorm Header Text</h2>
<div class="sticky">Sticky Element</div>
<p style="font-size: 35px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vel dolore delectus
 esse consequatur at nulla, consequuntur sint quas ea. Incidunt, ex. Consequatur 
ipsa earum veritatis fugiat iusto, doloremque sunt beatae quaerat laboriosam nemo 
soluta quidem porro quia. Dolore reprehenderit cum voluptatibus eius assumenda
 ipsam tenetur asperiores magni aliquid eligendi doloribus quidem ipsa et praesentium 
provident molestias quaerat laboriosam, veniam aspernatur repellendus. Debitis sapiente, 
odit iste voluptatibus nesciunt veritatis incidunt mollitia nostrum, vitae suscipit iusto 
molestias consequuntur rem facere perspiciatis ad! Ratione reiciendis asperiores aperiam 
vitae facilis accusantium non aliquid, facere cupiditate reprehenderit tempore veritatis 
eum accusamus omnis tempora quos! </p>
</body>
</html>

出力

上記のコードは次の出力を生成します-

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

少し下にスクロールすると、要素は固定として機能します-

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


  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, sans-serif;

  2. 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, sans-serif;