在網(wǎng)頁設計中,標題欄一直是一個比較重要的UI組件。而懸浮效果則讓標題欄更具有交互性和美觀性。下面我們將介紹如何使用CSS實現(xiàn)標題欄懸浮效果。
.header { position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); } .header__list { display: flex; justify-content: space-between; align-items: center; height: 60px; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .header__item { font-size: 18px; font-weight: bold; color: #333; cursor: pointer; }
以上CSS代碼實現(xiàn)了一個簡單的標題欄,其中.header
表示標題欄整個容器的樣式,position: fixed
是用來實現(xiàn)懸浮效果的核心屬性,這個屬性能夠將元素的位置固定在頁面上,不隨頁面滾動而改變位置。同樣,我們將標題欄的top: 0; left: 0; width: 100%;
屬性設置為0,并將背景顏色修改為白色方便觀察。此外,我們還用了一個box-shadow
屬性來添加一個陰影效果。
接下來,我們需要將標題欄中的菜單項使用Flex布局完成橫向居中和自適應寬度的效果。.header__list
是標題欄的菜單容器,.header__item
則代表了每一個菜單項。同時,我們還可以通過動態(tài)改變菜單項的字體顏色實現(xiàn)交互效果。
除了以上樣式,我們還可以使用JS來控制標題欄的懸浮效果。當滾動到一定距離時,通過改變標題欄的樣式來實現(xiàn)懸浮效果。這個功能可以使用window.scroll
事件來實現(xiàn)。
const header = document.querySelector('.header'); window.addEventListener('scroll', () => { if (window.scrollY > 60) { header.classList.add('header--fixed'); } else { header.classList.remove('header--fixed'); } });
以上JS代碼監(jiān)聽了頁面的scroll
事件,當滾動距離超過60px時,給標題欄添加.header--fixed
樣式表示懸浮效果。否則,就移除這個樣式。
總結來說,使用CSS實現(xiàn)標題欄懸浮效果并不難,關鍵在于理解position: fixed
這個屬性的作用。之后再根據(jù)具體需求添加其他樣式即可實現(xiàn)自己想要的效果。