Jquery頭部滾動固定的實現(xiàn)代碼片段,以下代碼為項目開發(fā)中的片段,實現(xiàn)方法思路僅供參考。
//頭部固定
var animateFlag = 1;
$(document).scroll(function () {
var scrollTop = $(document).scrollTop();
if (scrollTop > 65) {
$("#header").addClass('header-fixed');
if (animateFlag) {
animateFlag = 0;
$("#header").stop().animate({
'top': '0px'
}, 500);
}
} else {
if (animateFlag == 0) {
animateFlag = 1;
$("#header").removeClass('header-fixed');
$("#header").animate({
'top': '-65px'
}, 500);
}
}
});
// 頭部導航懸浮
function fixed() {
var scrollTop = $(document).scrollTop();
if (scrollTop > 140) {
$("#new-header").addClass("header-fixed");
$('#body-container').css('padding-top', '60px');
}
else {
$("#new-header").removeClass("header-fixed");
$('#body-container').css('padding-top', '0');
}
}
fixed();
$(window).scroll(function () {
fixed();
});
//頭部固定
var animateFlag = 1;
$(document).scroll(function () {
var scrollTop = $(document).scrollTop();
if (scrollTop > 65) {
$("#header").addClass('header-fixed');
if (animateFlag) {
animateFlag = 0;
$("#header").stop().animate({
'top': '0px'
}, 500);
}
} else {
if (animateFlag == 0) {
animateFlag = 1;
$("#header").removeClass('header-fixed');
$("#header").animate({
'top': '-65px'
}, 500);
}
}
});
// 頭部導航懸浮
function fixed() {
var scrollTop = $(document).scrollTop();
if (scrollTop > 140) {
$("#new-header").addClass("header-fixed");
$('#body-container').css('padding-top', '60px');
}
else {
$("#new-header").removeClass("header-fixed");
$('#body-container').css('padding-top', '0');
}
}
fixed();
$(window).scroll(function () {
fixed();
});