滑動後浮動式固定選單,超簡單! - 部落格

原文完整版: http://edwardzou.blogspot.tw/2017/09/fixMenu.html

根據統計，使用者進入網站後最容易注意到的就是選單(navigation)，一個好的選單可以
讓使用者找到他想要看的資訊，達到資訊提供媒介的效果。

讓選單固定在上方的效果對於行動裝置的UX十分重要，
尤其是部落格文章通常都不會太短，它可以讓使用者不用在看完文章後想點其他連結時一
直往上滑(當然可能有95%的人文章看完後就關掉網站了...)

而且要是看到什麼讓使用者有興趣的東西，他可以直接在選單上尋找，降低他的麻煩。
Javascript
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 495) { /* 要滑動到選單的距離 */
$('.dropdowns').addClass('navFixed'); /* 幫選單加上固定效果 */
} else {
$('.dropdowns').removeClass('navFixed'); /* 移除選單固定效果 */
}
});
});

<style>
.navFixed {
z-index: 10;
position: fixed;
top: 0;
left: 0;
margin-top: 0;
min-width: 100%;
}
</style>

滑動一段距離後上方選單固定在最上方，
說穿了其實就只是偵測螢幕的移動距離，再加上CSS固定效果而已，其實很簡單。

--