Jquery头部滚动固定的实现代码片段

时间:2018-03-27 来源:风信官网 点击: 658次

Jquery头部滚动固定的实现代码片段,以下代码为项目开发中的片段,实现方法思路仅供参考。

//头部固定
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();
});
X孝感风信网络科技有限公司

截屏,微信识别二维码

微信号:189 8648 0214

(点击微信号复制,添加好友)

  打开微信

微信号已复制,请打开微信添加咨询详情!