滚动监听+导航固顶

css

/*固顶导航*/
.z_static_top{
    width:100%;
    background:#fff;
    z-index: 99999;
    padding-top:20px;
    padding-bottom:20px;
}
.z_fixed{
    box-shadow: 0px 5px 5px rgba(0,0,0,0.07);
    position: fixed;
    top:0;
    margin-bottom: 100px;
}

js:

//滚动监听事件 + 固顶导航
    $(window).scroll(function() {
        var top = $(window).scrollTop();
        if(top>=850){
            $(".z_static_top").addClass("z_fixed");
        }else{
            $(".z_static_top").removeClass("z_fixed");
        }
    });
/*    $(".z_md1").click(function(){
        var t = $(window).scrollTop();
        $('body,html').animate({'scrollTop':t+200},100)  //单击一处 不停地往下滚动
    })*/
})
//锚点平滑滚动
jQuery(document).ready(function($){
    $('.z_md1').click(function(){
        $('body,html').animate({'scrollTop':791},100);
    });
    $('.z_md2').click(function(){
        $('body,html').animate({'scrollTop':1500},100);
    });
    $('.z_md3').click(function(){
        $('body,html').animate({'scrollTop':2334},100);
    });
    $('.z_md4').click(function(){
        $('body,html').animate({'scrollTop':3159},100);
    });
    $('.z_md5').click(function(){
        $('body,html').animate({'scrollTop':3959},100);
    });
    $('.z_md6').click(function(){
        $('body,html').animate({'scrollTop':4419},100);
    });
    $('.z_md7').click(function(){
        $('body,html').animate({'scrollTop':4895},100);
    });
    /*$('.z_md3').click(function(){$('html,body').animate({scrollTop:$('#z_md3').offset().top}, 1000);});
    $('.z_md7').click(function(){$('html,body').animate({scrollTop:$('#z_md7').offset().top}, 1000);});*/

 

posted @ 2017-06-11 20:47  和路雪  阅读(420)  评论(0编辑  收藏  举报