純粋なCSSで天井効果を実現

HTML

<div class="header">

</div>
<nav>
   吸顶的头
</nav>
<div class="content">

</div>
<footer>
    底部
</footer>

CSS

.header {
    
    
	width:100%;
	height:160px;
	background:#87CEEB;
}
nav {
    
    
	width:100%;
	height:100px;
	position:sticky;
	top:0px;
	background:#F98202;
}
.content {
    
    
	width:100%;
	background:blue;
	height:1000px;
}
footer {
    
    
	background:#87CEEB;
}

{ /デフォルト値。通常のストリームにはポジショニング要素は表示されません（無視またはステートメント）。/ / 、要素の相対的位置を生成するその通常の位置に対して位置決めします。/ /に対する絶対位置決め要素の生成親位置決め以外の第一位置決め要素。/ /ブラウザウィンドウの位置に対して要素の絶対位置を生成します。/ /引当金は親要素から継承する必要があるプロパティの値。/ /キーワードを設定するために使用されるデフォルト値に属性を、それはいずれにも適用することができるスタイル。（IEは、このキーワードをサポートしていません） / /設定されていないとして、我々は単純に理解することができるキーワード。実際、それはキーワードと組み合わせです。/ /それが示すことによって、「粘着性」実現することができるオフセット/ }
position: static;top, bottom, left, rightz-index
position: relative;
position: absolute;static
position: fixed;
position: inherit;position
position: initial;CSSCSS
position: unset;initialinherit
position: sticky;

崇拝