当前位置:首页 > 网页特效 > jQuery特效 >

jQuery定位滚动导航效果代码

时间:2014-08-04 08:51 来源:互联网 作者:源码搜藏 收藏 推荐

  • 广告推荐
效果预览 立即下载

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>

本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

jQuery特效下载排行

最新文章