[Blogger] 滑動後浮動式固定選單,超簡單!
原文完整版: 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固定效果而已，其實很簡單。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.249.97.32
※ 文章網址: https://www.ptt.cc/bbs/Blog/M.1504278821.A.5E8.html
Blog 近期熱門文章
PTT數位生活區 即時熱門文章
