黄兵的个人博客

jquery 滚动菜单实例

先上html代码：

<script src="//cdn.bootcss.com/jquery/3.0.0-rc1/jquery.js"></script>
<article>
    <nav class="nav_menu">
        <ul class="comment_center">
            <li id="menu_1" class="active">九大症状</li>
            <li id="menu_2" >肌肤问题</li>
            <li  id="menu_3">嫩肤利器</li>
            <li  id="menu_4">美肤理念</li>
            <li  id="menu_5">适合人群</li>
        </ul>
    </nav>
</article>

css代码：

article .nav_menu{
    width: 100%;
    height: 78px;
    background-color: #f6e4cc;
    overflow: hidden;
}
article .nav_menu ul{
    width: 1020px;
    overflow: hidden;
    display: block;
}
article .nav_menu ul li{
    float: left;
    font-size: 24px;
    margin: 0 40px;
    line-height: 78px;
    text-align: center;
}
article .nav_menu ul li.active{
    width: 176px;
    height: 100%;
    background-color: #99CCCC;
    float: left;
    color:white;
}

js代码：

// 导航栏跟随效果
var nav_fixed = false;
$(window).scroll(function() {
    var scrolltop = $(window).scrollTop();
    if (scrolltop >= 852) {
        if( nav_fixed==false ){
            $(".nav_menu").addClass("fixed");
            nav_fixed=true;
        }
        if(scrolltop>=852 && scrolltop<2121){
            $('.nav_menu ul li').eq(0).addClass('active').siblings().removeClass('active');
        }else if(scrolltop>=2122 && scrolltop<3050){
            $('.nav_menu ul li').eq(1).addClass('active').siblings().removeClass('active');
        }else if(scrolltop>=3050 && scrolltop<4050){
            $('.nav_menu ul li').eq(2).addClass('active').siblings().removeClass('active');
        }else if(scrolltop>=4050 && scrolltop<4850){
            $('.nav_menu ul li').eq(3).addClass('active').siblings().removeClass('active');
        }else if(scrolltop>=4850){
            $('.nav_menu ul li').eq(4).addClass('active').siblings().removeClass('active');
        }
    }else{
        if( nav_fixed==true ){
            $(".nav_menu").removeClass("fixed");
            nav_fixed=false;
        }
    }
});
var elem=$('.nav_menu ul li').length;
for(var i=0;i<elem;i++){
    $('.nav_menu ul li').hover(function () {
        $(this).addClass("active").siblings().removeClass('active');
    },function () {
        $(this).siblings().removeClass('active');
    });
    //单击li事件
    $('#menu_1').click(function () {
        $('html,body').stop().animate({scrollTop: '850px'}, 800);
    });
    $("#menu_2").click(function () {
        $('html,body').stop().animate({scrollTop:'2122px'},800);
    });
    $("#menu_3").click(function () {
        $('html,body').stop().animate({scrollTop:'3050px'},800);
    })
    $("#menu_4").click(function () {
        $('html,body').stop().animate({scrollTop:'4050px'},800);
    })
    $("#menu_5").click(function () {
        $('html,body').stop().animate({scrollTop:'4850px'},800);
    })
}

基于jQuery粘性导航插件smint的实现方式：

  SMINT是一个为一页式网站爱好者做的简单jQuery插件，目前最新为3.0版本。
      官方网站地址：
      http://www.outyear.co.uk/smint
      Demo地址：
      http://www.outyear.co.uk/smint/demo/

      SMINT有两个主要的元素，一个是带粘性的导航栏，保持在网页的顶部，当页面向下滚动时会指定到当前菜单；而当你点击菜单按钮时，页面会自动滚动到你点击的部分。

    如何使用？

      1、首先在网页的head部分引入javascript类库：

      2、创建一个菜单，给它一个样式名称，比如：subMenu，就像下面的代码：

<div class="subMenu">
<div class="inner">
<a class="subNavBtn" href="#sTop">首页</a>
<a class="subNavBtn" href="#section1">窗体流程</a>
<a class="subNavBtn" href="#section2">签核效率</a>
<a class="subNavBtn" href="#section3">行为方式</a>
<a class="subNavBtn" href="#section4">用户群体</a>
<a class="subNavBtn" href="#section5">系统运维</a>
</div>
</div>

3、每个<a>标签的href对应到一个页面区块（section）:

<div class="section section1">
<div class="inner">
<h1>窗体流程</h1>
<img src="images/flow.png" />
</div>
</div>

      4、在页面的script部分，加入下面的一段Javascript代码，用于初始化smint:   

$(document).ready( function() {
        $('.subMenu').smint();
}); 

      5、smint实在是我见过的最简单的插件，他只有一个可选项，那就是页面滚动速度：

$('.subMenu').smint({
   'scrollSpeed' : 1000
});

      默认值是500毫秒（半秒钟），你可以修改为任何你喜欢的数值。

参考资料：

朱优良的博客

jQuery粘性导航插件smint