Web-Floor-Navbar 楼层导航菜单Demo

楼层导航菜单Demo

这篇主要分享一个偶尔在项目中会用到的小工具,关于这个叫法很多,我们就姑且叫它楼层导航吧。

  • jQuery
  • Web-Floor-Navbar
  • 楼层导航菜单

目录

  • 楼层导航菜单Demo
    • 目录
      • Demo预览
      • CSS section
      • jQuery section
      • HTML section

Demo预览

Web-Floor-Navbar 楼层导航菜单Demo_第1张图片


CSS section


body,ul,li{
    margin:0;
    padding:0;
    list-style:none;
}
body{
    font:normal 14px/1.125 'Microsoft Yahei',Aria,Helvetiva,sans-serif;
    background:#999;
    color:#fff;
}
a{text-decoration:none;}
#container{
    position:relative;
    width:980px;
    margin:0 auto;
}
.item-list{
    color:#000;
    height:300px;
    line-height:300px;
    margin-top:10px;
    background:#f9f9f9;
    text-align:center;
    border:1px solid #ccc;
}
ul{
    position:fixed;
    right:40px;
    top:40px;
}
ul>li>a{
    height:30px;
    width:30px;
    line-height:30px;
    text-align:center;
    display:block;
    color:#000;
    background:#fff;
    margin-top:10px;
    cursor:pointer;
    border:1px solid #000;
    border-radius:50%;
}
ul>li.cur>a{
    background:red;
    color:#fff;
}
.bottom{
    height:20px;
    width:100%;
    margin:0 auto;
    margin-top:500px;
    margin-bottom:50px;
    text-align:center;
}
.top{
    height:20px;
    width:100%;
    margin:0 auto;
    margin-top:50px;
    margin-bottom:500px;
    text-align:center;
}

jQuery section


/**
 *  date   :  2016/05/08
 *  author :  Coco Tsau
 *  fixed   :  多次点击、多次动画和检测滚动条停止
 */

$(function(){

    var ft=[],//存放楼层的绝对位置

        timeout = false,//检测滚动条停止

        navbar = $('#navbar'),

        fnav = $('#navbar li');//楼层导航按钮

    $('#container .item-list').each(function(v){

        ft.push($(this).offset().top);//获取楼层的绝对位置

    });

    navbar.hide();

    fnav.removeClass('cur').eq(0).addClass('cur');//初始化按钮样式

    fnav.click(function(){

        if($(this).hasClass('cur'))return false;//屏蔽多次点击

        var index = $(this).prevAll().length;//获取当前按钮索引

        $("html,body").stop().animate({scrollTop:ft[index]},200);//先结束所有动画,再开始动画

        return false;//屏蔽默认点击事件
    });

    $(window).scroll(function(){

        var currentTop = $(window).scrollTop();//获取当前滚动条位置

        currentTop>=ft[0]-100 ? navbar.fadeIn() : navbar.fadeOut();//页面滚动到一定位置时显示

        if (timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function() {//检测停止

            currentTop<=ft[0] ? fnav.removeClass('cur').eq(0).addClass('cur')
            : fnav.removeClass('cur').eq(getFloor(currentTop)).addClass('cur');

        }, 200);

    });

    function getFloor(pos){//根据滚动条位置确定楼层

        if(ft.length==0 || pos<=ft[0])return 0;

        if(pos>=ft[ft.length-1])return ft.length-1;

        for(var v=0;vif(pos>=ft[v] && pos1])return v;
        }
    }
})

HTML section





http-equiv="Content-Type" content="text/html; charset=utf-8">
楼层导航
--国际惯例,引用jquery源,节省资源嘛。-->

                    
                    

你可能感兴趣的:(javaScript)