向下滚动时减小页眉填充顶部值

Decreasing header padding top value on scroll down

本文关键字：填充 顶部 滚动      更新时间：2023-09-26

我需要减少头元素的填充顶部值。这是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中减少页眉的填充值？

这是小提琴

您不能使填充为负数，但您可以通过从初始填充值中减去滚动偏移量使其收缩，直到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/

相关文章：