立即注册
 找回密码
 立即注册

QQ登录

只需一步,快速开始

我逸网

我逸分享各类计算工具和资料
不再需要查找公式和数据

安逸

我逸预设各种计算条件和经验
结果只在少量调整之间

效率

将繁琐交给我逸
我用故

我逸

[Js/Jquery] Jquery单页面导航条固定及定位一例

[复制链接]
发表于 2016-3-26 22:26:25 | 显示全部楼层 |阅读模式
以下jqery代码可以实现在单网页中向下滚动浏览时的导航顶部固定,并且滚动到对应的板块时高亮显示当前导航;以及点击导航文字时平滑跳转到对应的内容位置。
$(function(){
    varsubNav_active=$(".adv_active");
    varsubNav_scroll=function(target){
        subNav_active.removeClass ("adv_active");
        target.parent().addClass("adv_active");
        subNav_active=target.parent();
    };
    $("#subNava").click(function(){
        subNav_scroll($(this));
        vartarget=$(this).attr("href");
        vartargetScroll=$(target).offset().top-80;
        $("html,body").animate({scrollTop:targetScroll},300);
        returnfalse;
    });
    //页面跳转时定位
    if(window.location.hash){
        vartargetScroll=$(window.location.hash).offset().top-80;
        $("html,body").animate({scrollTop:targetScroll},300);
    }
    $(window).scroll(function(){
        var$this=$(this);
        vartargetTop=$(this).scrollTop();
        varfooterTop=$("#footer").offset().top;
        varheight=$(window).height();
        if(targetTop>=520){
            $("#subNav").addClass("fixedSubNav");
            $(".empty-placeholder").removeClass("hidden");
        }else{
            $("#subNav").removeClass("fixedSubNav");
            $(".empty-placeholder").addClass("hidden");
        }
        if(targetTop<750){
            subNav_scroll($(".adv_door"));
        }elseif(targetTop>1200&&targetTop<1640){
                subNav_scroll($(".adv_source"));
        }elseif(targetTop>2314&&targetTop<2734){
                subNav_scroll($(".adv_price"));
        }elseif(targetTop>2968&&targetTop<3268){
                subNav_scroll($(".adv_transfer"));
        }elseif(targetTop>3327&&targetTop<3627){
                subNav_scroll($(".adv_payment"));
        }elseif(targetTop>3651&&targetTop<4071){
                subNav_scroll($(".adv_promise"));
        }elseif(targetTop>4163&&targetTop<4473){
                subNav_scroll($(".adv_ride"));
        }elseif(targetTop>4580){
            subNav_scroll($(".adv_finance"));
        }
    })
}());

回复 收藏

使用道具 举报

Archiver|服务支持:DZ动力|  

Powered by Discuz! X3.3© 2001-2013 Comsenz Inc.

Copyright © 2016-2022 我逸网 cmd2d.com All Rights Reserved.
备案号:皖ICP备16004147号-1

beian 皖公网安备 34010302000278号

快速回复 返回顶部 返回列表