標題：Sticky Navigation Bar
出處：A.PAO designSTUDIO BLOG
時間：Thu, 24 May 2018 16:13:53 +0000
作者：apao
地址：https://blog.apao.idv.tw/post/1263/

內容：
這個CSS主要是可以從畫面的某個X座標，移動到頂端時，便停留在畫面頂端，不再需要Javascript計算位置。
幫客戶製作網頁時，考慮好幾種界面來導入網頁，因為簡單，輕量化，不使用 Javascript ，覺得很棒；但沒有完全對應多數瀏覽器版本，於是就放棄這個方案，做個筆記，過幾年大家都升級電腦與系統了，這個寫法就通用了。

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=2951

中文參考網頁：smaple

CSS部分

body {
    font-size: 28px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}



HTML部分

<div class="header">
  <h2>向下捲動畫面</h2>
  <p>你就會看到 CSS3 position sticky 效果</p>
</div>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">最新消息</a></li>
  <li><a href="#contact">網站內容</a></li>
</ul>

<h3><a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_sticky">Sticky Navigation Bar Example</a></h3>
<p>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
向下捲再向下捲，你就會看到 Sticky Navigation Bar 的效果。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
將 Sticky Navigation Bar 一直頂到上端，就會停留在畫面頂端。<br>
</p>



英文 smaple
https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_sticky

對應瀏覽器請參考以下連結：
https://caniuse.com/#search=sticky


Generated by Bo-blog 2.1.1 Release