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

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

2024-11-21 21:22:39   203人阅读

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实现固定顶部 定位滚动导航效果代码


联系
我们