首页

源码搜藏网

首页 > 网页特效 > jQuery特效 >

jQuery定位滚动导航效果代码

创建时间:2014-08-04 08:51  

jQuery定位滚动导航效果代码
jQuery定位滚动导航效果代码
效果预览 立即下载

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


<script>
$(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"));
}
})
}());
</script>

上一篇:jQuery实现玫瑰花瓣飘落效果
下一篇:jquery页面滚动显示第几步效果

相关内容

热门推荐