web前端tips：CSS之sticky粘滯效果

ticky介紹

Sticky是CSS3的一個定位屬性，它可以讓元素在滾動過程中“粘”在屏幕上的某個位置，直到滾動到某個臨界點后才會跟隨滾動。Sticky定位可以使得頁面更具交互性和易用性，也提高了頁面的可讀性。 Sticky定位可以通過以下代碼實現：

position: sticky;top: 0;

其中，top屬性定義了元素“粘”在屏幕上的位置。當元素到達指定位置時，它將會變成固定定位，直到滾動到指定位置后才會解除固定定位。 Sticky定位的特點：

當元素被滾動到達指定位置時，它會變成固定定位，直到滾動到指定位置后才會解除固定定位。
Sticky定位可以讓元素在滾動過程中保持在屏幕上的某個位置，這提高了頁面的可讀性和易用性。
Sticky定位可以和其他定位屬性（如top、bottom、left、right）結合使用，從而實現更加復雜的布局效果。

實現一個高度能自動變小的吸附需求

場景：客戶需要這樣一個動態效果，就是網站的頂部導航欄在未觸及到頁面頂部時，它的高度為 100px ，隨著頁面向下滾動，頂部導航欄在觸及頁面頂部時，保持在頁面頂部顯示，當頁面繼續向下滾動時，頂部導航欄導航欄隨滾動減少高度，直到高度減少到50px時不再繼續減少。
在以前：我們基本使用js來實現此效果，基本原理就是監聽滾動條，計算滾動距離，動態賦值高度和樣式。
在現在：我們直接使用 position: sticky; 即可實現此效果：

<div class="header">
    <div class="header2">
	這是吸附
    </div>
</div>

.header {
    position: sticky;
    top: -50px;
    width: 100%;
    height: 100px;
    background-color: #f0f;
}
.header2 {
    position: sticky;
    top: 0;
    background-color: rgba(25,25,25,.5);
    height: 50px;
}

是不是很簡單就能實現此效果啦，相比js一大堆邏輯代碼， position: sticky; 可簡潔的不是一點兩點啦

兼容性

可見，對現代瀏覽器，兼容還是不錯噠，當然老項目ie瀏覽器還是只有乖乖的寫js啦

結語

牽手持續為你分享各類知識和軟件，歡迎訪問、關注、討論并留下你的小心心?

TML 基礎- 4個實例

本章介紹了 HTML 中較為常用的標簽的實例。

您可能還沒接觸過這些實例，不過不用擔心，閱讀完本章您就能夠掌握它們了！

HTML 標題

HTML 標題（Heading）是通過<h1> - <h6> 標簽來定義的。

h 是英文header標題的縮寫，標題無處不在，它的應用范圍十分廣泛：網站結構、寫作文、PPT 等。h1 是主標題，h2 是副標題，h3、h4、h5、h6 依次遞減字體的大小。

實例

<h1>這是一個標題</h1>

<h2>這是一個標題</h2>

<h3>這是一個標題</h3>

HTML 段落

HTML 段落是通過標簽 <p> 來定義的，P 是英文paragraph段落的縮寫，經常被用來創建一個段落，就和你寫作文一樣，您可以進行實戰實驗。

實例

<p>這是一個段落。</p>

<p>這是另外一個段落。</p>

HTML 鏈接

HTML 鏈接是通過標簽 <a> 來定義的.a標簽，也叫anchor（錨點）元素，既可以用來鏈接到外部地址實現頁面跳轉功能，也可以鏈接到當前頁面的某部分實現內部導航功能。

實例

<a href="#">這是一個鏈接</a>

提示:在 href 屬性中指定鏈接的地址。

(您將在本教程稍后的章節中學習更多有關屬性的知識)。

HTML 圖像

HTML 圖像是通過標簽 <img> 來定義的。使用img元素來為你的網站添加圖片，使用src屬性指向一個圖片的具體地址。

舉例如下：<img src="#">

請注意：img元素是自關閉元素，不需要結束標記。

實例

注意：圖像的名稱和尺寸是以屬性的形式提供的。

本文為 HTML 基礎教程第六章，下一章：HTML元素

【小提示】tips:本文由數據微學院作者原創，轉載請注明來源或聯系作者。更多優秀參考好文請關注【數據微學院】360doc個人圖書館。

OCTYPE

DOCTYPE(Document Type)該聲明處于dw文檔中最前面的位置，處于html標簽之前，此標簽告知瀏覽器文檔使用哪種HTML或者 XHTML規范。

DTD(Document Type Definition)聲明以<!DOCTYPE>開始，不區分大小寫，前面沒有任何內容，如果有其他內容(空格除外)會使瀏覽器在IE下開啟怪異模式(quirks mode)渲染網頁。公共DTD，名稱格式為注冊//組織//類型標簽//語言,注冊指組織是否由國際標準化組織(ISO)注冊，+表示是，-表示不是。組織即組織名稱，如：W3C。類型一般是 DTD。標簽是指定公開文本描述，即對所引用的公開文本的唯一描述性名稱，后面可附帶版本號。最后語言是DTD語言的ISO 639語言標識符，如：EN表示英文，ZH表示中文。XHTML 1.0 可聲明三種DTD 類型。分別表示嚴格版本，過渡版本，以及基于框架的HTML文檔。

HTML 4.01 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML5文檔類型

<!DOCTYPE html>

meta

聲明文檔使用的字符編碼

html5之前<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

html5<meta charset="utf-8">

follow 跟蹤鏈接并分析目標網頁。這是默認行為，并且可忽略。

index 將網頁編入索引。這是默認行為，并且可忽略。

noodp 不使用 Open Directory Project 來創建內容描述。

noydir 不使用 Yahoo Directory 來創建內容描述。

noarchive 不允許搜索引擎顯示內容的緩存版本。

cache 允許搜索引擎顯示內容的緩存版本。

nocache 不允許搜索引擎顯示內容的緩存版本。

標簽

定義文檔的結構，使文檔的標記更加語義化。

html5 demo

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

<div>

<ul>

<li></li><

</ul>

<dl>

</dl>

</div>

</header>

<h1>article aside</h1>

<article>article</article>

<aside>aside</aside>

<footer>footer</footer>

</body>

</html>

tips

1. html5標簽更加豐富和完善，div標簽似乎沒有什么用武之地，但是如果僅僅想在文檔中加入一段樣式，這個時候div標簽便派上用場了。

2. 標簽在不同瀏覽器默認樣式會有一些區別，為了一個網頁在不同瀏覽器中看到的效果一樣，通常要先格式化一下標簽的樣式

3.如果要在不支持html5的瀏覽器中使用html5標簽，需要加一小段JavaScript代碼

4.標簽可編輯屬性contenteditable

在線咨詢

上一篇：「懶人編程學院」javascript的13個懶人技巧
下一篇：使用 JavaScript 實現待辦事項列表

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

web前端tips：CSS之sticky粘滯效果

您的項目需求