CODEWITHSUNDEEP
javascriptjquerycss
Firz
Firz

Reputation: 53

Decreasing header padding top value on scroll down

I need to decrease padding top value on my header element. Here's the html :

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

The 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
}

The jQuery : 

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

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

I know that there's no negative padding in css, but how to decrease the header's padding value in jQuery when I scroll down the browser?

here's fiddle

Upvotes: 1

Views: 1262

Answers (1)

dfsq
dfsq

Reputation: 193301

You can't make padding negative, however you can make it shrink until padding-top is zero while you scroll by subtracting scroll offset from initial padding value:

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());
});

Demo: http://jsfiddle.net/o6jts5tr/5/

Upvotes: 1

Related Questions