作者t5957810 (Edzou)
看板Blog
标题[Blogger] 滑动後浮动式固定选单,超简单!
时间Fri Sep 1 23:13:39 2017
原文完整版:
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://webptt.com/cn.aspx?n=bbs/Blog/M.1504278821.A.5E8.html