向下滚动时减少标题填充顶部值

Question

我需要减少标头元素上的填充顶部值。 这是html：

<div class="header">
</div>
<!-- just for trace -->
<span id="trace">0</span>

CSS：

body{
    min-height: 1000px;
}

#trace{position: fixed;top: 300px; right: 0;}

.header{
    padding-top: 90px;
    background-color: #000;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 70px
}

jQuery：

jQuery(window).scroll(function(event){
    jQuery('.header').css({
            'padding-top' : -jQuery(window).scrollTop()
    });

    jQuery('#trace').html(jQuery(window).scrollTop());
});

我知道css中没有负填充，但是当我向下滚动浏览器时，如何减少jQuery中标题的填充值？

此处fiddle

Answer 1

你不能使填充为负，但是你可以缩小，直到padding-top为零，同时滚动从初始填充值减去滚动偏移：

var $header = jQuery('.header'),
    paddingTop = parseInt($header.css('paddingTop'));

jQuery(window).scroll(function (event) {
    $header.css({
        paddingTop: paddingTop -$(window).scrollTop()
    });
    jQuery('#trace').html($(window).scrollTop());
});

演示：http://jsfiddle.net/o6jts5tr/5/