Nasıl Oluşturulur: Kaydırırken Sabit Başlık
- Previous page Gradient background scrolling
- Next page Header缩小 when scrolling
CSS ve JavaScript kullanarak kaydırırken sabit/yaşayan başlık nasıl oluşturulur öğrendiğinizden bahseden bir ders.
Kaydırırken Sabit Başlık Oluşturma
İlk Adım - HTML Ekle:
<div class="header" id="myHeader"> <h2>My Header</h2> </div>
İkinci Adım - CSS Ekle:
Sayfa başlığının tarzını ayarlayın; position: yapışkan ve top: 0 ekleyin, böylece sayfa başlığı kaydırıldığında üstte sabit kalır..header { position: yapışkan; üst: 0; dolgu: 10px 16px; arka_plan: #555; renk: #f1f1f1; }
öğe position: yapışkan;
sonrası, konumu kullanıcıların kaydırma konumuna göre belirler.
Yapışkan öğe, kaydırma konumuna göre göreceli konum ve sabit konum arasında geçiş yapar. Belirtilen kaydırma konumuna ulaşana kadar göreceli konumda kalır; ulaştıktan sonra o konuma 'yapışır' (yani position: sabit
aynı)。
Dikkat:Yapışkan konumun etkin olabilmesi için en az birini belirtmeniz gerekiyor. üst
vesağ
vedüşük
veya soluk
中的一个。
Related pages
Tutorial:CSS position
- Previous page Gradient background scrolling
- Next page Header缩小 when scrolling