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