码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现固定顶部 定位滚动导航效果代码

时间:2015-01-29 19:36:50      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:

jQuery实现固定顶部 定位滚动导航效果代码,很常见的效果,非常实用;滚动滚动条时,导航固定顶部,并且滚动到对应的板块时,当前导航高亮显示;点击导航文字时平滑跳转到对应的板块。

$(function(){     
    var subNav_active = $(".adv_active");    
    var subNav_scroll = function(target){    
        subNav_active.removeClass   ("adv_active");    
        target.parent().addClass("adv_active");    
        subNav_active = target.parent();    
    };    
    $("#subNav a").click(function(){    
        subNav_scroll($(this));    
        var target = $(this).attr("href");    
        var targetScroll = $(target).offset().top - 80;    
        $("html,body").animate({scrollTop:targetScroll},300);    
        return false;    
    });    
    //页面跳转时定位    
    if(window.location.hash){    
        var targetScroll = $(window.location.hash).offset().top - 80;    
        $("html,body").animate({scrollTop:targetScroll},300);    
    }    
    $(window).scroll(function(){    
        var $this = $(this);    
        var targetTop = $(this).scrollTop();    
        var footerTop = $("#footer").offset().top;    
        var height = $(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"));    
        }else if(targetTop > 1200 && targetTop < 1640){    
                subNav_scroll($(".adv_source"));    
        }else if(targetTop > 2314 && targetTop < 2734){    
                subNav_scroll($(".adv_price"));    
        }else if(targetTop > 2968 && targetTop < 3268){    
                subNav_scroll($(".adv_transfer"));    
        }else if(targetTop > 3327 && targetTop < 3627){    
                subNav_scroll($(".adv_payment"));    
        }else if(targetTop > 3651 && targetTop < 4071){    
                subNav_scroll($(".adv_promise"));    
        }else if(targetTop > 4163 && targetTop < 4473){    
                subNav_scroll($(".adv_ride"));    
        }else if(targetTop > 4580){    
            subNav_scroll($(".adv_finance"));    
        }    
    })    
}());

jQuery实现固定顶部 定位滚动导航效果代码

标签:

原文地址:http://blog.csdn.net/zyu67/article/details/43274111

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!