javascript - 向下滚动时减小标题填充顶部值

Question

我需要减少页眉元素上的 padding top 值。 这是 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 中 header 的填充值？

这里是 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/