步骤如下:
- 正在编写和布局页面,包括导航栏A;
- 另外编写一个一样的导航栏B,设置display:fixed固定定位方式并隐藏,作为下拉以后悬浮顶部的菜单;
- 判断下拉距离,当下拉一定高度后显示导航栏B,相反则隐藏。
说明:步骤3的实现,利用jquery的scroll事件(替代方案为:js 的 onScroll事件),判断document的scrollTop的值,具体参见:https://blog.csdn.net/vailook/article/details/53783691
<script type="text/javascript"> $(function(){ var nav=$(".nav"); //得到导航对象 var win=$(window); //得到窗口对象 var sc=$(document);//得到document文档对象。 win.scroll(function(){ if(sc.scrollTop()>=100){ nav.addClass("fixednav"); $(".navTmp").fadeIn(); }else{ nav.removeClass("fixednav"); $(".navTmp").fadeOut(); } }) })