javascript - .bind ('scroll' ), 添加动画或减少 "bounce"

Question

这是我用来在用户滚动页面时固定菜单的 jQuery 脚本。 <强> This 是现场演示。

<script>
var num = 170; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('#header').addClass('fixed');
    } else {
        $('#header').removeClass('fixed');
    }
});
</script>

<style>
.fixed {
    position:fixed;
    top:0;
    background-color:#e4e4e4;
    width:100% !important;
    background-image: url("images/logo_small.png") !important;
    background-size:20px auto !important;
    margin:0 auto !important;
    padding:20px 0 10px !important;
    background-position:90px center !important;
    z-index:1;
}


#header {
    background-image: url("images/logo.png");
    background-position: 30px 5px;
    background-repeat: no-repeat;
    background-size: 152px auto;
    font-size: 13px;
    margin: 18px auto 0;
    padding: 60px 0 87px 100px;
    width: 780px;
}
</style>

问题是，如您所见，当“小”菜单出现时会“跳转”，内容会突然上升。

Answer 1

http://jsfiddle.net/andaywells/jVy5L/64/embedded/result/

var num = 170; //number of pixels before modifying styles

$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {

    $('#header').addClass('fixed');


} else {
    $('#header').removeClass('fixed');

}
});

我删除了淡出，并添加了 position: fixed;到标题，所以使用 css 转换，滚动更加流畅。